如何在反应中使用钩子传递 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>
  )
}

希望能帮助到你！

Answer 2

React 库促进组件组合。有关此模式的最新文章，请阅读 Robin Wieruch 的文章

您可以重构 TestTable 组件，如下所示：

这里我添加了一个codesandbox示例：https ://codesandbox.io/embed/smoosh-cache-ytfky

import React from 'react'

export default function TestTable(props) {
  return (
    <React.Fragment>
      {props.children}
    </React.Fragment>
  )  
}

您的 TestButton 组件可以保持基本相同。您需要将导出关键字添加到组件的开头。实际上，这些组件只是普通的旧功能。要了解有关不同风格的导出函数的更多信息，请参阅Alex Rauschmayer 的精彩描述。对于使用默认导出还是命名导出存在争议，我个人更喜欢命名导出，它更具声明性，而且更容易让我看到发生了什么。

  export default function TestButton() {
    return (
      <React.Fragment>
        <button>Test1</button>
        <button>Test2</button>
        <button>Test3</button>
        <button>Test4</button>
        <button>Test5</button>
      </React.Fragment>
    );
  };

您现在可以在另一个函数中组合两个组件，如下所示：

export function DisplayTable(props) {
  return (
    <TestTable>
       <TestButton />
    </TestTable>
)
}

笔记：

1. 这假设您的所有函数都在一个文件中，但最好将它们放在自己的文件中并导入/导出它们。
2. this 关键字仅适用于您编写类组件的情况，如果您编写函数组件，那么您得到的只是 props，但您必须在函数参数中显式声明它。
3. 我已经将你所有的 ES6 箭头函数转换为常规的 javascript 函数，我发现它更容易概念化，并且了解这些只是常规函数，但在 React 领域它们是你的组件。

至于 React Hooks，它们是自 16.8 以来对 React 的新介绍，它真正解决了能够在不使用类的情况下处理状态和副作用的特定用例。请参阅原始文档以获得详细的描述

Answer 3

在你的index.js（返回按钮的地方）：

const TestButtons = () => (
  <>
    <button>Test1</button>
    <button>Test2</button>
    <button>Test3</button>
    <button>Test4</button>
    <button>Test5</button>
  </>
)

export default TestButtons

然后，在你的table.js：

import TestButtons from 'path/to/index.js'

const TestTable = () => (
  <TestButtons />
)

您应该使用该import语句从另一个文件导入组件。