Question

我在这里使用两个组件，

var first = React.createClass(){
     render:function(){
          <View>
             <Text>First Component</Text>
             <TextInput style={{borderWidth:1,borderColor:'red'}} onPress={getData()}/>
          </View>
      }
})
    function getData(){
      <second/>
    }
    var second = React.createClass(){
         render:function(){
              <View>
                 <ScrollView>
                   <Text>Second component</Text>
                 </ScrollView>
              </View>
          }
    })

必需结果：第一个组件第二个组件

Answer 1

看起来你正试图在点击某些内容时显示一个新组件？我处理这个问题的方法是使用状态。通常，您只希望JSX显示在render方法中。

所以你应该做的就是：

var first = React.createClass({
  getInitialState: function() {
    return {
      showSecond: false
    };
  },
  _handlePress: function() {
    return this.setState(showSecond(true));
  },
  render: function() {
    <View>
      <View style={styles.first}>
        <Text> ... </Text>
        <TextInput />
        <TouchableHighlight onPress={@_handlePress}>
          <Text> Button </Text>
        </TouchableHighlight>
      </View>
      {if showSecond
        <View style={styles.second}>
          <ScrollView>
            <Text> Scroll Item </Text>
          </ScrollView>
        </View>
      }
    </View>
  }
});

现在发生的情况是当您按下更改状态的按钮时，会重新呈现您的组件，现在状态为真，它会显示second组件

如何使用react-native从外部函数返回组件

1 个答案: