react中如何操作children, react操作children的方式

在项目中,我们可能常常会使用children来接收一个组件的子组件,有的时候,我们或许需要对子组件进行一定的操作.可是如果直接对children进行更改,可能在部分版本中会出现错误,那么我们应该怎么办呢?

我们先了解一下,如何利用children接收子组件

children

const Father = (props) => {
	const { children } = props;
	return (
		<div>
			<div>我是父组件</div>
			<div>{children}</div>Ï
		</div>
	)
}

const Child = () => {
	return <div>我是子组件</div>
}

const Comp = () => {

	return (
		<Father>
			<Child/>
		</Father>
	)
}

上面是一个简单的例子,描述了如何使用children接收子组件;下面我演示一下,如果要对children进行操作的时候,该如何操作;

React.Children.map(children,(child) => {})

这个api可以直接对children进行遍历,而不用关心children是否为数组,当children为一个数组时,遍历的每一项都是ReactNode, 当children本身为ReactNode时,children将被返回

const render = () => {
	return React.Children.map(children,(child) => {
		// to do sth
		return child;
	})	
}

React.cloneElement(children,{ …props })

虽然可以用Children.map来对childre进行遍历,但是如果我们想对children进行拦截,并给children添加新的属性和方法,那么仅仅是遍历就做不到了,此时就需要React.cloneElement来实现了

const render = () => {
	return React.Children.map(children,(child) => {
		const { props } = child;
		
		// 判断child是否为有效的react节点
		if(React.isVaildElement(child)){
			return React.cloneElement(child,{
				name:'lilei',
				age:31,
				...props,
			})
		}else return null;
	})
}

以上就是操作children的核心方法,有了这些方法,我们就可以实现类似antd中Radio的Group的功能