项目中遇到,瞬间懵逼,这不是我认识的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 方法的, 会报错。