为了账号安全,请及时绑定邮箱和手机立即绑定

React中props.children和React.Children的区别?

/ 猿问

React中props.children和React.Children的区别?

当年话下 2019-04-12 09:06:32

React中props.children和React.Children的区别?


查看完整描述

2 回答

?
慕姐8265434

在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来。如下:

function ParentComponent(props){

return (

<div>

{props.children}

</div>

)

}

如果想把父组件中的属性传给所有的子组件,该怎么做呢?——使用React.Children帮助方法就可以做到

比如,把几个Radio组合起来,合成一个RadioGroup,这就要求所有的Radio具有同样的name属性值。可以这样设计:把Radio看做子组件,RadioGroup看做父组件,name的属性值在RadioGroup这个父组件中设置

首先是子组件:

//子组件

function RadioOption(props) {

return (

<label>

<input type="radio" value={props.value} name={props.name} />

{props.label}

</label>

)

}

然后是父组件,不仅需要把它所有的子组件显示出来,还需要为每个子组件赋上name属性和值://父组件用,props是指父组件的props function renderChildren(props) {//遍历所有子组件return React.Children.map(props.children, child => {

if (child.type === RadioOption)

return React.cloneElement(child, {

//把父组件的props.name赋值给每个子组件

name: props.name

})

else

return child

})

}

//父组件

function RadioGroup(props) {

return (

<div>

{renderChildren(props)}

</div>

)

}

function App() {

return (

<RadioGroup name="hello">

<RadioOption label="选项一" value="1" />

<RadioOption label="选项二" value="2" />

<RadioOption label="选项三" value="3" />

</RadioGroup>

)

}

export default App

以上,React.Children.map让我们对父组件的所有子组件又更灵活的控制



查看完整回答
反对 回复 2019-04-13
?
largeQ

React中props.children和React.Children的区别
程序可改为:
int max,min; /*全局变量*/
void max_min_value(int *array,int n)
{int *p,*array_end;
array_end=array+n;
max=min=*array;
for(p=array+1;p<array_end;p++)
if(*p>max)max=*p;
else if (*p<min)min=*p;
return;
}
main()
{int i,number[10],*p;
p=number; /*使p指向number数组*/
printf("enter 10 integer umbers:\n");
for(i=0;i<10;i++,p++)
scanf("%d",p);
p=number;
max_min_value(p,10);
printf("\nmax=%d,min=%d\n",max,min);
}
归纳起来,如果有一个实参数组,想在函数中改变此数组的元素的值,实参与形参的对应关系有以下4种:
1) 形参和实参都是数组名。
main()
{int a[10];
……
f(a,10)
……
f(int x[],int n)
{
……
}
}
a和x指的是同一组数组。



查看完整回答
反对 回复 2019-04-13
  • 2 回答
  • 0 关注
  • 1069 浏览
我要回答
慕课专栏
更多

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信