0

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

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

我想知道什么？

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

我在做什么

桌子有很多道具，但 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>
        );
      }

上面的代码有一个dataComponent传递colName“帐户名称”的组件，该组件由调用的用户头像组件（我作为库的一部分构建）组成MUserIcon，同样可以说它MLink是一个超链接组件。

4

1 回答 1

2

在 React 中，您可以使用子组件。您可以像这样构造它，而不是使用您的dataComponent道具：

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

然后，在 中MTable，而不是 using props.dataComponent，您可以使用props.children，它仍然会为您提供User所有相同的东西。

您也可以将其定义User为组件本身，这样看起来会更加一致：

const user User = () => [ /* your array of fragments here */ ]

<MTable /* props here */>
   <User />
</MTable>
于 2018-05-24T16:30:26.243 回答