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

Here i am using two components,

我在这里使用两个组件,

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

Required Result: First Component Second component

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

1 个解决方案

#1

it looks like you're trying to show a new component when something is clicked? The way I would handle this is by using state. Generally you only want JSX to show up in your render method.

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

So what you should do is have something like:

所以你应该做的是:

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>
  }
});

Now what happens is when you press the button you change state, which rerenders your component, and now that the state is true, it shows the second component

现在发生的情况是当你按下你改变状态的按钮,它重新渲染你的组件,现在状态为真,它显示第二个组件

#1