react--props
Posted 秋天1014童话
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react--props相关的知识，希望对你有一定的参考价值。
一、react的props用以父组件向子组件传递参数
如下例所示：
1、propTypes用于验证props的类型。
2、getDefaultProps用于设置props的默认值。
3、在父组件中通过属性的方式，传递给子组件<SubMessage messages=this.state.subMessages/>，子组件中使用this.props.messages得到父组件传递的messages值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this</title>
<script type="text/javascript" src="bower_components/react/react.js"></script>
<script type="text/javascript" src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
var MessageBox = React.createClass(
getInitialState: function()
return
subMessages : [
'我会写代码',
'也会撒娇',
'老板叫我回去搬砖'
]
;
,
render: function()
return (
<div>
<SubMessage messages=this.state.subMessages/>
</div>
);
);
var SubMessage = React.createClass(
propTypes:
messages: React.PropTypes.array.isRequired,
,
getDefaultProps: function()
return
messages: ['默认的子消息']
;
,
render: function()
var subMsg = [];
this.props.messages.forEach(function(val, index)
subMsg.push(
<p>码农说：val</p>
);
)
return (
<div>subMsg</div>
);
);
React.render(
<MessageBox />,
document.getElementById('app')
);
</script>
</body>
</html>二、this.props.children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/jsx">
var Comp = React.createClass(
render: function()
console.log( React.Children.map);
var childComps = React.Children.map(this.props.children,function(child)
return <li>child</li>;
)
return (
<ol>
childComps
</ol>
);
);
ReactDOM.render(
<Comp>
<span>hello</span>
<span>nihao</span>
</Comp>,
document.getElementById('app')
);
</script>
</body>
</html>以上是关于react--props的主要内容，如果未能解决你的问题，请参考以下文章