常被忽略的React Children用法

前言

在使用React组件时，经常用到props和Children传递数据给子组件，其中最常用的是：父组件传递元素给子组件，子组件用Children来渲染，但是Children还有一些其他的用法，下面总结一下。

一  常用用法

父组件传递元素给子组件

// 子组件
function Child({ children }) {return ({children})
}   
// 父组件
function Parent() {return (Hello, world.)
}

二  将对象作为Children传入

// 子组件
function Child({ children }) {return ({children.firstName}, {children.lastName})
}   
// 父组件
function Parent() {const user = {firstName: 'Hello',lastName: 'world'}return ({user})
}

三  将函数作为Children传入

我们以一个ToDoList为例：

// 子组件
function Child({ todos, children }) {return (
{todos.map((item, index)=> (
{children(item)}
))}
)
}// 父组件
function Parent() {const todos = [{ label: '任务一', status : 'done' },{ label: '任务二', status : 'progress' },{ label: '任务三', stat us: 'done' }];const isCompleted = todo => todo .status === 'done';return ({todo => isCompleted(todo) ? { todo.label } : todo.label})
}

最后

上面第二和第三种用法就是常常被我们忽略的Children用法，希望对你有所帮助。如有问题，欢迎指正。

文章原文放到我自己的博客上了，欢迎点赞：

常被忽略的React Children用法https://www.cikayo.com/article/122

文章内容部分参考于《React模式》

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！