[英]How to pass this.props.children using hooks in react
this is my first time to create a react application.这是我第一次创建 React 应用程序。
I wanted to pass buttons from index.js to table component that uses hooks .我想将按钮从 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>
);
};
pass it to Table component将其传递给 Table 组件
return (
<React.Fragment>
<TestTable
{...{
testButton}} />
</React.Fragment>
Then, table component will use it to render the table, with the buttons included.然后,表格组件将使用它来呈现表格,包括按钮。
export default function TestTable({
testButton,
...props
})
return (
{testButton});
Am I doing it correctly?我做得对吗?
How can I export this from index.js, import in Table component.js, and render in Table component?如何从 index.js 导出它,在 Table component.js 中导入,并在 Table 组件中呈现?
Thank you.谢谢你。
I think what you want is:我想你想要的是:
const TestTable = ({ children }) => {
return (
<table>
<tr>
<td>Something...</td>
<td>{children}</td>
</tr>
</table>
)
}
And then:进而:
const App = () => {
return (
<TestTable>
<button>Test 1</button>
<button>Test 2</button>
<button>Test 3</button>
</TestTable>
)
}
Hope it helps!希望能帮助到你!
The React library promotes component composition. React 库促进了组件组合。 For a good recent writeup of this pattern read Robin Wieruchs article
有关此模式的最新文章,请阅读 Robin Wieruchs 文章
You can refactor your TestTable component like the following:你可以像下面这样重构你的 TestTable 组件:
Here I have added a codesandbox example: https://codesandbox.io/embed/smoosh-cache-ytfky这里我添加了一个codesandbox示例: https ://codesandbox.io/embed/smoosh-cache-ytfky
import React from 'react'
export default function TestTable(props) {
return (
<React.Fragment>
{props.children}
</React.Fragment>
)
}
Your TestButton component can remain mostly the same.您的 TestButton 组件可以保持大致相同。 You need to add the export keyword to the beginning of the component.
您需要在组件的开头添加 export 关键字。 Actually, the components are just plain old functions.
实际上,组件只是普通的旧函数。 To learn more about the different styles of exporting functions see Alex Rauschmayer great description .
要了解有关不同风格的导出函数的更多信息,请参阅Alex Rauschmayer 的精彩描述。 there are arguments for using either default exports or named exports, I personally prefer named exports which is more declarative and just easier for me to see what is happening.
有使用默认导出或命名导出的论据,我个人更喜欢命名导出,它更具声明性,更容易让我看到正在发生的事情。
export default function TestButton() {
return (
<React.Fragment>
<button>Test1</button>
<button>Test2</button>
<button>Test3</button>
<button>Test4</button>
<button>Test5</button>
</React.Fragment>
);
};
You can now compose your two components in another function as follows:您现在可以在另一个函数中组合您的两个组件,如下所示:
export function DisplayTable(props) {
return (
<TestTable>
<TestButton />
</TestTable>
)
}
NOTE:笔记:
As for React Hooks, they are a new introduction to React since 16.8 which really solve a specific use case of being able to handle state and side effects without using classes.至于 React Hooks,它们是自 16.8 以来对 React 的新介绍,它真正解决了能够在不使用类的情况下处理状态和副作用的特定用例。 see the original docs for a great description
有关详细说明,请参阅原始文档
In your index.js
(where you return the buttons):在你的
index.js
(你返回按钮的地方):
const TestButtons = () => (
<>
<button>Test1</button>
<button>Test2</button>
<button>Test3</button>
<button>Test4</button>
<button>Test5</button>
</>
)
export default TestButtons
Then, in your table.js
:然后,在您的
table.js
:
import TestButtons from 'path/to/index.js'
const TestTable = () => (
<TestButtons />
)
You should use the import
statement to import a component from another file.您应该使用
import
语句从另一个文件导入组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.