Question

我需要这样的东西：

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

Answer 1

const Component = (props) => (<div className="someClass">{props.children}</div>)
const Child = () => (<div>Child content</div>)

你很亲密！您只需要将子项作为属性分配给父项。

Component.Child = Child;

现在，您可以根据需要使用<Component />和<Component.Child />。

如何用里面的组件创建React组件？

1 个答案: