我需要这样的东西:
<Component>
<Component.Child1>Test 1</Component.Child1>
<Component.Child2>Test 2</Component.Child2>
</Component>
我注意到一些React UI框架具有此功能的实现,例如Ant Design(
<Layout />
),Semantic UI(<Button />
)和Blueprint(<Tabs2 />
)。我试图找到如何做相同的组件,但是找到了有关dot notation的文章。有了它,我可以使用子组件,但不能使用父组件。
那么,创建可以在JSX中与子组件一起使用的组件的合适方法是什么?
澄清。我拥有的:
const Component = (props) => (<div className="someClass">{props.children}</div>)
const Child = () => (<div>Child content</div>)
我想要的是:
const App = () => (
<Component>
<Component.Child>Test 1</Component.Child>
</Component>
)
最佳答案
const Component = (props) => (<div className="someClass">{props.children}</div>)
const Child = () => (<div>Child content</div>)
好吧,你是如此亲密!您只需要将子级作为属性分配给父级即可。
Component.Child = Child;
现在,您可以根据需要使用
<Component />
和<Component.Child />
。