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

Posted 2023-03-15

【中文标题】如何使用 react-native 从外部函数返回组件

【英文标题】：How to return the component from external function using react-native

【发布时间】：2015-08-10 11:32:05

【问题描述】：

这里我使用了两个组件，

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

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

【参考方案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 组件

【讨论】：

不，我只想从外部函数调用第二个组件，这就是我需要的场景

所以我不确定你为什么必须使用外部函数，但即便如此，你也必须做与上面类似的事情。您必须通过使用 if 语句并监视状态来指定新组件必须在渲染的 DOM 中显示的位置。然后，您可以调用一个返回该组件的函数，而不是像上面那样拥有该组件。所以按下，改变状态。新状态触发 if 语句，进而触发返回 JSX 的外部函数。不过，这样做似乎非常没有必要。

我说的第二个组件需要在其他几个组件中调用。为了实现代码重用和易于维护，我想编写一组将在其他组件中调用的组件。这就是我们在反应中的做法。将尝试使用 react-native 并还原。感谢您的帮助。

因此，如果您有一个经常出现的组件，例如微调器。我会用module.exports = React.createClass(..) 将它写在自己的文件中，然后在每个需要它的组件中，只需require('./ui/spinner') 将微调器添加到您需要的任何地方。这就是我为 React 和 React-Native 做的方式