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

时间:2019-05-23 10:11:12

标签: javascript reactjs

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

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

Declaration:

  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>
      <TestTable
        {...{
          testButton}} />
    </React.Fragment>

然后,表格组件将使用它来呈现带有包括按钮的表格。

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

return (
{testButton});

我做对了吗?

如何从index.js导出,导入到table component.js中并在Table组件中呈现?

谢谢。

3 个答案:

答案 0 :(得分:1)

  

工作代表:https://repl.it/@Kozandmo/CriticalZigzagEquipment

在index.js(返回按钮的位置)中:

export default function TestButtons() {
  return (
      <>
        <button>Test1</button>
        <button>Test2</button>
        <button>Test3</button>
        <button>Test4</button>
        <button>Test5</button>
      </>
    );
}

然后,在您的table.js中:

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

export default function TestTable() {
  return (
    <TestButtons />
  )  
}

您需要使用import语句从另一个文件中导入组件。

答案 1 :(得分:1)

React库促进组件组成。为了更好地记录此模式read Robin Wieruchs article

您可以像下面那样重构TestTable组件:

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

import React from 'react'

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

您的TestButton组件可以基本保持不变。您需要将export关键字添加到组件的开头。实际上,这些组件只是普通的旧功能。 要了解有关导出函数的不同样式的更多信息,请参见Alex Rauschmayer great description。对于使用默认导出还是使用命名导出存在一些争论,我个人更喜欢使用命名导出,它更具声明性,并且更容易理解正在发生的事情。

  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. 仅当您正在编写类组件时,此关键字才适用;如果您编写函数组件,则仅获得道具,但必须在函数参数中明确声明它。
  3. 我已经将您所有的ES6箭头函数转换为常规的javascript函数,我发现它更容易概念化,并且学习到的只是常规函数,但是在React领域中,它们是您的组件。

对于React Hooks,它们是自16.8以来对React的新介绍,它真正解决了无需使用类即可处理状态和副作用的特定用例。参见original docs for a great description

答案 2 :(得分:0)

我认为您想要的是:

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

希望有帮助!