this.props.XXX与this.props.childr
2017-10-18 本文已影响990人
春木橙云
项目中遇到，瞬间懵逼，这不是我认识的this.props用法啊！一问才知道，原来还有这种操作，特此留存，以备后查！
props常规用法
props是react框架组件化一个重要组成，this.props对象的属性与其组件的属性是一一对应的。举例如下：
//组件Component：
<Component name="hahahaha",age="23",sex="famale" />
//Component内部：
class Component extends React.Component{
render(){
return (
<div>{this.props.name}</div>
)
}
}
export default Component;
//输出hahahaha
this.props.children用法
this.props.children表示组件的所有子节点。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
</script>
</body>
</html>
//输出：
hello
world
这里需要注意的是，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。
