Question

我想创建一个名为“MyComponent”的组件，并且还希望将子元素添加为＆lt; myComponent.Button /＆gt;。

<MyComponent selected={this.state.activeTab} onSelected={this.onTabSelect}>
   <MyComponent.Button name='child1' text='text1' />
   <MyComponent.Button name='child2' text='text2'/>
   <MyComponent.Button name='child3' text='text3'/>
</myComponent>

如何在react-native中构造组件，以便我可以如上所述调用组件？

Answer 1

我是从PickerIOS和PickerIOS.Item举例说明的。

创建您的MyComponent组件，它将像this.props.children那样呈现：

class MyComponent extends Component {
  render() {
    return this.props.children;
  }
}

然后您可以像{<}>那样创建Button

MyComponent.Button = class extends Component {
  render() {
    return <Button title="Hello" onPress={() => {}} />;
  }
};

然后你可以声明你的组件

<MyComponent>
  <MyComponent.Button />
</MyComponent>

为了演示的目的，我已经取下了一些道具。

React-native组件，将child添加为component.button

1 个答案: