前言
在使用React组件时,经常用到props和Children传递数据给子组件,其中最常用的是:父组件传递元素给子组件,子组件用Children来渲染,但是Children还有一些其他的用法,下面总结一下。
一 常用用法
父组件传递元素给子组件
// 子组件
function Child({ children }) {
return (
<div className="child">{children}</div>
)
}
// 父组件
function Parent() {
return (
<Child>
<span>Hello, world.</span>
</Child>
)
}
二 将对象作为Children传入
// 子组件
function Child({ children }) {
return (
<div className="child">
{children.firstName}, {children.lastName}
</div>
)
}
// 父组件
function Parent() {
const user = {
firstName: 'Hello',
lastName: 'world'
}
return (
<Child>
{user}
</Child>
)
}
三 将函数作为Children传入
我们以一个ToDoList为例:
// 子组件
function Child({ todos, children }) {
return (
<ul>
{
todos.map((item, index)=> (
<li key={index}>{children(item)}</li>
))
}
</ul>
)
}
// 父组件
function Parent() {
const todos = [
{ label: '任务一', status : 'done' },
{ label: '任务二', status : 'progress' },
{ label: '任务三', stat us: 'done' }
];
const isCompleted = todo => todo .status === 'done';
return (
<Child todos={ todos }>
{
todo => isCompleted(todo) ? <b>{ todo.label }</b> : todo.label
}
</Child>
)
}
最后
上面第二和第三种用法就是常常被我们忽略的Children用法,希望对你有所帮助。如有问题,欢迎指正。
文章原文放到我自己的博客上了,欢迎点赞:
常被忽略的React Children用法https://www.cikayo.com/article/122
文章内容部分参考于《React模式》