我需要这样的东西:

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

07-24 09:44
查看更多