将一个组件传递给 props 数组中的另一个组件答案

【问题标题】：Pass a component to another inside a props array将一个组件传递给 props 数组中的另一个组件
【发布时间】：2020-12-15 17:54:21
【问题描述】：

如何将一个相对组件通过 props 传递给另一个组件进行渲染？

例如，从 app.js 向组件表传递一个带有带有相对调用的组件按钮的道具，然后像下面的代码一样调用它？有可能吗？

错误

元素类型无效：需要一个字符串（对于内置组件）或一个>类/函数（对于复合组件）但得到：对象。

在 Table.js 组件中

import React from "react";
import { Container } from "./styles";

const Table = ({ data, columns }) => {
  return (
    <Container>
      <thead>
        <tr>
          {columns.map((header) => {
            return <th>{header.text}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {data.map((dado) => {
          return (
            <tr>
              {columns.map((column) => {
                var { Mask } = column;
                console.log(Mask);
                return (
                  <td>
                    <Mask />
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </Container>
  );
};

export default Table;

App.js

import React from "react";
import "./styles.css";
import Table from "./Table";

export default function App() {
  const data = [
    { name: "teste", age: 30, place: "brazil", place2: "brazil" },
    { name: "teste", age: 30, place: "brazil", place2: "brazil" },
    { name: "teste", age: 30, place: "brazil", place2: "brazil" }
  ];

  const columns = [
    {
      dataField: "name",
      text: "Nome",
      Mask: (
        <button
          type="button"
          onClick={() => {
            console.log("Do Something");
          }}
        >
          {data.name}
        </button>
      )
    },
    {
      dataField: "age",
      text: "Idade",
      Mask: (
        <button
          type="button"
          onClick={() => {
            console.log("Do Something");
          }}
        >
          {data.name}
        </button>
      )
    },
    {
      dataField: "place",
      text: "Localidade",
      Mask: (
        <button
          type="button"
          onClick={() => {
            console.log("Do Something");
          }}
        >
          {data.name}
        </button>
      )
    },
    {
      dataField: "place2",
      text: "2",
      Mask: (
        <button
          type="button"
          onClick={() => {
            console.log("Do Something");
          }}
        >
          {data.name}
        </button>
      )
    }
  ];

  return (
    <div className="App">
      <Table data={data} columns={columns} />
    </div>
  );
}

【问题讨论】：

什么是Container？
容器是一个表
也许你的意思不是<Mask />，而是{Mask}？
@James，tks，工作，但我不知道怎么做才能像孩子们一样做一个属性，你知道怎么做吗？
@BrunoHenrique，添加了显示如何修改儿童道具的答案，请查看

标签： javascript reactjs react-native

【解决方案1】：

对Table.js 进行以下更改：

import React from "react";
// import { Container } from "./styles";

const Table = ({ data, columns }) => {
  return (
    <>
      <thead>
        <tr>
          {columns.map(header => {
            return <th>{header.text}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {data.map(dado => {
          return (
            <tr>
              {columns.map((column, index) => {
                let { Mask } = column;
                console.log(column["Mask"]);
                Mask = {
                  ...Mask,
                  props: { children: dado[Object.keys(dado)[index]] }
                };
                /*------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^
                above you can see how we can set the children props of button
                */
                return <td>{Mask}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </>
  );
};

export default Table;

完整的工作示例：Stackblitz

【讨论】：

【解决方案2】：

<Mask /> 仅适用于函数或类组件，因此Mask 应该是函数或类。在上面的示例中，它是一个 React 元素，而不是一个 React 组件。

请查看this article 以了解其中的区别。

所以为了渲染它，只需要将它用作一个值，就像这样：

{columns.map((column) => {
  var { Mask } = column;
  console.log(Mask);
  return (
    <td>
      {Mask}
    </td>
  );
})}

更新：起初我并没有完全理解这个问题。因此，为了将数据传递给Mask，您可以使用another answer 的方法或将其转换为如下函数：

const columns = [
  {
    dataField: "name",
    text: "Nome",
    Mask: ({ children }) => (
      <button
        type="button"
        onClick={() => {
          console.log("Do Something");
        }}
      >
        {children}
      </button>
    )
  },
  ...
];

并按照您在问题中所做的那样呈现它：

{data.map((dado) => {
  return (
    <tr>
      {columns.map((column) => {
        var { Mask, dataField } = column;
        console.log(Mask);
        return (
          <td>
            <Mask>
              {dado[dataField]}
            </Mask>
          </td>
        );
      })}
    </tr>
  );
})}

【讨论】：