Reactjs 在react中将一个组件传递给另一个组件

我正在创建一个小的组件库，我有一个表组件，我的任务是使其模块化和通用化，以便以后可以修改

现在表本质上是一个容器组件，它可以包含我在库中构建的不同的其他小组件

我想知道什么？

以下方法是否正确地将组件传递给其他组件？如果不是，那么正确的方法或更好的方法是什么

我在做什么

桌子上有很多道具，但有3种主要道具：

colName

它是传递每列的表列名的字符串数组

data

是一个数组，它包含每行的数组

dataComponent

（如果要将数据显示为普通文本数据，则保持未定义状态），这是用于每行特定列的组件数组（我在库中定义的组件数组）

关于行、列和代码的讨论太多了

下面是示例代码：

     const User = [
          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy1"} profile_type={"facebook"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.facebook.com"}
                link_content={"dummy1"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon user_name={"dummy2"} profile_type={"instagram"} />
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.instagram.com"}
                link_content={"dummy2"}
              />
            </span>
          </React.Fragment>,

          <React.Fragment>
            <span className="userinfo">
              <MUserIcon
                user_name="imawebdev"
                profile_type="linkedin"
                user_img_src={pro_pic}
              />,
            </span>
            <span className="userinfo">
              <MLink
                link_href={"https://www.linkedin.com"}
                link_content={"imawebdev"}
              />
            </span>
          </React.Fragment>
        ];






return (
          <div className="App">
            <MTable
              title="Demo Table"
              colsName={["Account Name", "Queued", "Errors"]}
              data={[["imawebdev", 5, 0], ["dummy1", 4, 3], ["dummy2", 4, 0]]}
              dataComponent={[User]}
            />
          </div>
        );
      }

const用户=[
,
,
,
];
返回(
);
}

---

上面的代码有一个

dataComponent

，它为

colName

“accountname”传递组件，该组件由名为

MUserIcon

的用户化身组件（我作为库的一部分构建）组成，对于超链接组件

MLink

也可以这么说。

在React中，您可以使用子组件。您可以这样构造它，而不是使用

dataComponent

prop：

<MTable /* props here */>
   {User}
</MTable>

---

在React中，可以使用子组件。您可以这样构造它，而不是使用

dataComponent

prop：

<MTable /* props here */>
   {User}
</MTable>