javascript - 在 react 中传递 child

Question

这是我第一次开发React应用程序。

我想在表格中显示 5 个按钮。我所做的第一种方法是在 Table.js 中对其进行硬编码

Table.js

        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          Reprocess
        </Button>{" "}
        <Button hidden={controlButton} onClick={() => reprocessConfirmation()}>
          View Details
        </Button>
        <Button hidden={!controlButton} onClick={() => updateConfirmation()}>
          Update
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => deleteConfirmation()}>
          Delete
        </Button>{" "}
        <Button hidden={!controlButton} onClick={() => resequenceConfirmation()}>
          Resequence
        </Button>

但是 Table.js 被设计为可重用，因此我的任务是将它们移动到 index.js。我通过创建一个具有包含按钮的函数的 var 来尝试它，并将其返回到 Table.js 并使用此行 {this.children}

使用子属性显示它

index.js

const testButton = () => {
    return (
      <React.Fragment>
        <button>Test1</button>
        <button>Test2</button>
        <button>Test3</button>
        <button>Test4</button>
        <button>Test5</button>
      </React.Fragment>
    );
  };

  return (
    <React.Fragment>
      <MyTable
        {...{
          testButton
        }}
      />
    </React.Fragment>
  );
}

在 Table.js 中我添加了

table.js


export default function MyTable({
  testButton,
  ...props
}) {

  return (
    <React.Fragment>
      <Table {...getTableProps()}>
        *****{props.children}
      </Table>
    </React.Fragment>

看来当我使用this.children=未定义props.children=不显示任何内容

非常感谢。

Answer 1

在根据子元素的长度渲染子元素时，您似乎没有将 pageOptions 属性传递给 MyTable 组件。