react--props

最新推荐文章于 2024-07-21 15:57:26 发布

秋天1014童话

最新推荐文章于 2024-07-21 15:57:26 发布

阅读量428

点赞数

分类专栏： web前端 react

本文链接：https://blog.csdn.net/u013217071/article/details/79475810

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

react

10 篇文章 0 订阅

订阅专栏

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