将组件渲染为实际组件的父级

Question

我有 2 个组件，我希望第一个组件成为第二个组件中的渲染道具，如果它被定义，它将封装第二个组件的内容。我不太明白如何写这个，而且我在渲染道具上找到的文档往往难以理解。有没有人写过类似的实现？

我追求的一般想法是，您将component1 的道具传递给component1 道具为component2，它会渲染<Component1> 及其在component2 中的道具。

我正在尝试做的粗略代码示例（它并不意味着工作）

    interface Component1 {
     id?: string;
     children: React.ReactNode;
    }

    const Component1 = (props: Component1) => {
      const { children } = props;
      return (<div className="component1">{children}</div>)
    }

    interface Component2 {
      component1?: (propsForComponent1) => <Component1 {...propsForComponent1}>
    }

    const Component2 = (props: Component2) => {
      const {component1} = props;
      if (component1) {
        return {component1({id: 'exampleId', children: <div className="component2">Stuff for component 2</div>)}}
      };
      return (<div className="component2">Stuff for component 2</div>);

    }

编辑：更改了示例，因为意图令人困惑。

编辑：现在只会将第一个组件作为道具传递给第二个组件。我认为一般的答案是不要尝试将一个组件用作两个组件，而只是坚持使用子组件。

Answer 1

您的代码示例中实际发生的情况是，即使您将整个组件 (Component1) 作为道具传递，您也不是渲染它，而是使用导入的 (或在范围内访问）Component1。

无论如何 - 你为什么要将整个组件作为道具传递，即使你基本上可以导入它？

我的建议 - 使用一个道具，而不是一个组件，而是一个 布尔标志 来确定是否应该包装组件。

interface Component2 {
  shouldBeWrapped?: boolean;
}

const Component2 = ({ shouldBeWrapped }: Component2) => {
  if (shouldBeWrapped) {
    return (
       <Component1 with props given in on component1 property>
          <div className="component2">Stuff for component 2</div>
       </Component1>
    );
  }

  return (<div className="component2">Stuff for component 2</div>);
}