Question

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

现在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这是一个超链接组件也是如此。

Answer 1

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

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

然后，在MTable，而不是使用props.dataComponent，您可以使用props.children，这仍然会为您提供User所有相同内容。

您还可以将User定义为组件本身，因此它看起来会更加一致：

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

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

将组件传递给另一个组件

1 个答案: