如何在反应中使用钩子传递 this.props.children

Question

这是我第一次创建反应应用程序。

我想将按钮从 index.js 传递到使用 hooks 的表组件。

 Declaration:

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

传递给 Table 组件

 return (
    <React.Fragment>
      <TestTable
        {...{
          testButton}} />
    </React.Fragment>

然后，表格组件将使用它来呈现包含按钮的表格。

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

return (
{testButton});

我做得对吗？

我如何从 index.js 中导出它，在 Table component.js 中导入，并在 Table 组件中呈现？

谢谢你。

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想你想要的是：

 const TestTable = ({ children }) => {
  return (
    <table>
      <tr>
        <td>Something...</td>
        <td>{children}</td>
      </tr>
    </table>
  )
}

接着：

 const App = () => {
  return (
    <TestTable>
      <button>Test 1</button>
      <button>Test 2</button>
      <button>Test 3</button>
    </TestTable>
  )
}

希望能帮助到你！

原文由 Jorge del Rio 发布，翻译遵循 CC BY-SA 4.0 许可协议