常被忽略的React Children用法

前言

在使用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模式》

常被忽略的React Children用法相关推荐

React.Children 详解
React.Children 详解 React.Children提供了处理 this.props.children 的 API,this.props.children 支持任何数据(组件.字符串.函数 ...
十、children的深入用法-React.Children对象上的方法
目标理解什么是children 掌握React.Children对象上的方法知识点什么是children 上图中我们看到了,我们之前学过的React.createElement方法,现在大家发现 ...
react 遍历对象_React 源码系列 | React Children 详解
本文基于 React V16.8.6,本文代码地址测试代码源码讲解 React 中一个元素可能有 0 个.1 个或者多个直接子元素,React 导出的 Children 中包含 5 个处理子元素的 ...
React - children props 与 render props
React - children props 与 render props 一. children props 1. 函数组件形式 2. 类组件形式二. render props 1. 函数组件形式 ...
小程序通过 ajax读取的图片数据如何展示_一个常被忽略的intouch的小技巧—鼠标悬停...
JZGKCHINA工控技术分享平台经常看到网上的大数据采集平台,平台的前端都是采用H5编写,熟悉H5技术的人应该都知道,H5主要是负责编写前台页面,炫酷的网站页面交互特效.3D效果都离不开H5.但是作 ...
【React】React.Children.only expected to receive a single React element child
背景: React 项目使用Ant Design + Storybook时发报: Uncaught Error: React.Children.only expected to receive a ...
【重点】React.Component用法
组件(Components)允许您将UI拆分为独立的可重用的部分,并单独的考虑每个部分. 总览 React.Component是一个抽象基类.这意味着直接引用React.Component是毫无意义的 ...
一些学习中常被忽略的 JavaScript 小技巧
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 作者:冷星 https://segmentfault.com/a/1190000018897633 ...
linux编译忽略warning,忽略警告@SuppressWarnings的用法
@SuppressWarnings注解用法 @SuppressWarnings注解主要用在取消一些编译器产生的警告对代码左侧行列的遮挡,有时候这会挡住我们断点调试时打的断点. 我们可以在方法上加上@S ...

常被忽略的React Children用法

前言

一常用用法

二将对象作为Children传入

三将函数作为Children传入

最后

常被忽略的React Children用法相关推荐

最新文章

热门文章

常被忽略的React Children用法

前言

一 常用用法

二 将对象作为Children传入

三 将函数作为Children传入

最后

常被忽略的React Children用法相关推荐

最新文章

热门文章

一常用用法

二将对象作为Children传入

三将函数作为Children传入