Question

我正在学习反应。

我有一个容器组件：

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

其中包含所有相关的子组件：

  <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>

但是，由于我需要添加另一个子组件，因此我将数据存储在对象数组sceneConfig中。

 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?',
      ],
    },
  ],

要显示新数据，我必须将LYDSceneQuestion组件从{props.text}更改为{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>

这会破坏我使用该组件的其他页面。

如何更改我的组件，以便它不会破坏使用它的其他页面？

我更改了我的数据：

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

要：

  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

你可以用这个

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

更新1

假设您将quesion作为道具传递

1）创建stateless组件

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

2）创建函数来检查isArray

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

3）容器将

<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>

容器组件道具错误

1 个答案: