我怎样才能让组件接受里面的元素？

Question

我想制作一个组件，但我希望它也接受元素。例如：

组件：

const Example = () => {

    return (
        <div>
            //Some Elements will come here.
        </div>
    )
}

另一页：

const App = () => {

    return (
        <Example>
            <div>
                <h1>Hello all </h1>
                <p>I want that elements acceptable on my custom component </p>
            </div>
        </Example>
    )
}

但我只能发送道具，我不能在我的组件标签内写任何东西。我怎样才能做到？谢谢大家！

Answer 1

React 定义了一个名为 children 的特殊属性。这正是您所需要的。

这样试试

const Example = ({ children }) => {
    return <div>{children}</div>;
};

const App = () => {
    return (
        <Example>
            <div>
                <h1>Hello all </h1>
                <p>I want that elements acceptable on my custom component </p>
            </div>
        </Example>
    );
};

Answer 2

您可以使用props.children

const Example = props => {
    return <div>{props.children}</div>;
};