react--props

发布时间：2020-12-15 06:32:42 所属栏目：百科来源：网络整理

导读：一、react的props用以父组件向子组件传递参数如下例所示： 1、propTypes用于验证props的类型。 2、getDefaultProps用于设置props的默认值。 3、在父组件中通过属性的方式，传递给子组件 SubMessage messages={this.state.subMessages}/ ，子组件中使用 this

一、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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!