在React中，是否允许将一个组件直接传递给另一个组件

Question

我刚开始反应，想知道是否允许您直接将一个或多个组件传递给另一个组件，而不是将其作为道具或子组件传递。

考虑以下内容：

const ChildComponent = () => {
return (
<h1> I am a child </h1>
);
}
const ChildComponent2 = () => {
return (
<h1> I am also a child </h1>
);
}
//Passing directly to Parent
const ParentComponent = () => {
return (
<div>
<ChildComponent/>
<ChildComponent2/>
</div>
);
}

//Passing as children
const ParentComponent2 = ({ChildComponent, ChildComponent2}) => {
return (
<div>
{ChildComponent}
{ChildComponent2}
</div>
);
}
<ParentComponent>
<ChildComponent/>
<ChildComponent2/>
</ParentComponent>

我读过关于将组件作为儿童与道具进行传递的文章。我还看到，在功能组件内部创建功能组件是一种反模式。我似乎找不到任何关于在不使用道具或儿童的情况下直接将一个或多个组件传递到另一个组件内部的方法。在测试时，组件呈现正确，但我不确定这是否是将组件传递给父组件的有效方式。

Answer 1

使用React的组合模型，您可以利用特殊的children道具直接传递子元素。

// With props object destructuring
const ParentComponent = ({children}) => {
return (
<div>
{children}
</div>
);
}
// Without props object destructuring
const ParentComponent = (props) => {
return (
<div>
{props.children}
</div>
);
}

这允许您通过嵌套JSX:将其他组件作为子组件传递给父组件

// A pair of children components
const ChildComponent1 = () => {
return <div>I am child 1</div>;
};
const ChildComponent2 = () => {
return <div>I am child 2</div>;
};
// Compose your parent component with its children
const App = (props) => {
return (
<ParentComponent>
<ChildComponent1 />
<ChildComponent2 />
</ParentComponent>
);
}

根据React文档，这是组成组件的推荐方式。

最后，有时您可能需要专门的组件或部分，并且可能不使用子组件，但始终呈现特定的组件。