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

前端之家收集整理的这篇文章主要介绍了reactjs – 如何使用子节点创建自定义React Native组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在纯 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 /原始版本中描述.

原文链接:https://www.f2er.com/react/300719.html

猜你在找的React相关文章