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

Question

我是 React 新手，想知道是否允许您直接将一个或多个组件传递给另一个组件，而不是将其作为 prop 或 child.

考虑以下几点：

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>

我读过有关将组件作为 children vs props 传递的内容。我还看到在功能组件内部创建功能组件是一种反模式。我似乎找不到任何关于在不使用 props 或 children 的情况下直接将一个或多个组件传递给另一个组件的信息。测试时，组件正确呈现，但我不确定这是否是将组件传递给 parent 组件的有效方式。

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 文档，这是组合组件的推荐方式。

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

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

In React is passing a component directly to another component allowed?

javascript

jsx

reactjs

react-functional-component