reactjs – 如何使用子节点创建自定义React Native组件

发布时间：2020-12-15 20:42:11 所属栏目：百科来源：网络整理

导读：我想在纯 JavaScript中创建一个React Native组件,由其他组件(如TouchableOpacity和Text)组成.我的应用程序中有几个按钮是由两个组件组成的,所以我认为学习如何创建我自己的组件以更好的代码重用是很好的. 完成的组件应该看起来或多或少这样： Button Tap me!

我想在纯 JavaScript中创建一个React Native组件,由其他组件(如TouchableOpacity和Text)组成.我的应用程序中有几个按钮是由两个组件组成的,所以我认为学习如何创建我自己的组件以更好的代码重用是很好的.

完成的组件应该看起来或多或少这样：

<Button>
  Tap me!
</Button>

这是迄今为止为组件制作的代码：

class Button extends Component {
  render () {
    <TouchableOpacity style={styles.button}>
      <Text style={styles.textButton}>
      </Text>
    </TouchableOpacity>
  }
};

但是,我不知道如何使用Tap我！我的组件中的内部小孩文本,我不知道如何使我的组件接受自定义道具和TouchableOpacity和文本道具.

PS：我知道这里有一些React Native组件,但是我更喜欢创建自己的组件,以便学习如何构建这种定制组件.此外,React Native是非常棒的,但是我无法在他们的文档中找到如何构建这样的东西,我认为对于从React开始的人来说,这是一个非常有趣的练习.

您可以通过this.props.children访问内部文本,您可以手动(通过this.props)或使用…运算符传递属性.
更多的内容在react.js文档中进行了描述(注意 – 不是React Native文档！).文档中最相关的部分是：

> http://facebook.github.io/react/docs/multiple-components.html
> https://facebook.github.io/react/docs/components-and-props.html

它是React Native文档的一般方法,而不是描述所有反应概念,它们仅描述了React Native部分,并且实际概念在React的Web /原始版本中描述.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!