Container Komponente Requisiten Fehler

Question

Ich lerne derzeit reagieren.

Ich habe einen Container-Komponente:

<SceneSelectNumber 
    goBack={this.goBack} 
    onChangeNumber={sceneConfig.onChangeNumber} 
    selectedNumberValue={this.props.daysInAweek} 
    onDone={this.onDone} 
    renderHowMuch 
    helpMeCalculate 
    sceneConfig={sceneConfig} 
    /> 

, die alle zugehörigen untergeordneten Komponenten enthält:

<Flexible> 
    <LYDSceneContainer 
     goBack={this.props.goBack} 
     subSteps={this.props.subSteps}> 
     <Flexible> 
     <LYDSceneQuestion {...this.props.sceneConfig.question[0]} /> 
     <LYDSelectNumber 
      selectedNumberValue={this.props.selectedNumberValue[0]} 
      onChangeNumber={this.props.onChangeNumber} 
     /> 
     </Flexible> 
     {this.props.renderHowMuch && this.renderHowMuch()} 
     {this.props.helpMeCalculate && this.renderHelpMeCalculateButton()} 
    </LYDSceneContainer> 

    <NextButton 
     onPress={this.props.onDone} 
     disabled={!this.props.selectedNumberValue} 
     fullWidth 
    /> 
    </Flexible> 

Aber, wie ich ein anderes Kind Komponente hinzufügen müssen, ich Daten in einem Array bin Speicherung von Objekten sceneConfig. Dies bricht meine anderen Seiten, die die Komponente verwenden

question: [ 
    { 
     text: ['on how many of the last 7 days', 'did you have a drink?'], 
    }, 
    { 
     text: [ 
     'On your drinking days', 
     'how many units of alcohol did you typically drink?', 
     ], 
    }, 
    ], 

die neuen Daten anzuzeigen, ich habe aus, {props.text} zu {props.text[1]}

<View style={[styles.container, props.style]}> 
    <Text style={styles.textRowNormal}> 
    {props.text[0]} 
    </Text> 
    <Text style={styles.textRowBold}> 
    {props.text[1]} 
    </Text> 
</View> 

meine LYDSceneQuestion Komponente ändern.

Wie kann ich meine Komponente ändern, damit andere Seiten, die sie verwenden, nicht beschädigt werden?

Ich habe meine Daten geändert:

const sceneConfig = { 
    question: { 
    text: 'string, 'string')], 
    }, 

An:

question: [ 
    { 
     text: ['on how many of the last 7 days', 'did you have a drink?'], 
    }, 
    { 
     text: [ 
     'On your drinking days', 
     'how many units of alcohol did you typically drink?', 
     ], 
    }, 
    ], 
    selectNumber: [() => {},() => {}], 
    onChangeNumber: [ 
    number => { 
     const data = { [field]: number }; 
     this.props.dispatch(assessmentActions.updateAssessment(step, data)); 
    }, 
    number => { 
     const data = { [field]: number }; 
     this.props.dispatch(assessmentActions.updateAssessment(step, data)); 
    }, 
    ], 

Answer 1

Sie dieses

<View style={[styles.container, props.style]}> 
    {props.text.map(function(item, i){ 
    return (
     <Text style={ i=0 ? styles.textRowNormal : styles.textRowBold }> 
     {item} 
     </Text> 
    ) 
    })} 
</View> 

Update 1 verwenden können

vorausgesetzt, Sie quesion als Requisiten

1) erstellen stateless Komponente

const ViewText = ({props}) => { 
    return(
     {props.data.text.map(function(item, i){ 
     return (
      <Text style={ i=0 ? styles.textRowNormal : styles.textRowBold }> 
      {item} 
      </Text> 
     ) 
     })} 
    ) 
}; 

2) Erstellt Funktion sind vorbei isArray

function isArray(obj) { 
    return (typeof obj !== 'undefined' && 
      obj && obj.constructor === Array); 
} 

3) Container

sein wird, um zu überprüfen

<View style={[styles.container, props.style]}> 
    {if(isArray(this.props.quesion)? 
     this.props.quesion.map(function(obj){ 
      <ViewText data={obj}/> 
     }): 
    <ViewText data={this.prop.quesion}/> 
    } 
</View>