javascript - 如何在 react 中使用钩子(Hook)传递 this.props.children

Question

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

我想将按钮从 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 组件中渲染？

谢谢。

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>
  )
}

希望对您有所帮助!