响应本地的道具

时间:2019-10-27 19:09:50

标签: reactjs react-native

我正在使用React Native制作测验应用程序。一个文件包含所有代码,然后在另一页上将所有代码称为此类。

我将具有所有代码的this.props.score放入文件中,并在另一个文件中使用score = {this.state.score}对其进行了调用,但未显示任何内容。

为什么?请帮帮我 代码:

// Function.js

    render() {
        var questionDatum = this.props.questionDatum;
        var questLength = this.props.questLength
        return (
            <ScrollView>
             <View style={styles.main}>
                  {questLength > this.props.progress ? 
                  (
                  <View>
                    <View style={styles.viewQuesProg}>
                    <Score score={this.props.score} />
                 </View>
                 <Questions questionDatum={questionDatum} />
               </View> 
                  ):(
                   <View> 
                    <Text>Your score: {this.props.score} </Text>
                  </View>
                  )}
                  </View>
                  </ScrollView>
        )
    }
}
};

 // Main.js 
 
  constructor(props) {
    super(props);
    
    this.state = {
         questionData: [{prompt: "Q 1", 
         answers: ['a',"b","c","d"], correct: 2}, 
         {prompt: "Q 2", answers: ["a","b","c","d"], correct: 0}], 
      progress: 0,
      score: 0
       }
  }

  
  
    render() {
        return (
          <Function 
          questionDatum={this.state.questionData[this.state.progress]}
          questLength={this.state.questionData.length}
          progress={this.state.progress}
          score={this.state.score}
          />
        )
    }
}

// ...

得分组件:

class Score extends React.Component {

    render() {
      return (
        <Text style={styles.progressText}>Score: {this.props.score}</Text>
      )
    }
  };

0 个答案:

没有答案