React系列五（React-Props）

最新推荐文章于 2024-04-19 08:36:35 发布

小公举plum

最新推荐文章于 2024-04-19 08:36:35 发布

阅读量420

点赞数 1

分类专栏： React 文章标签： React入门 React React Props

本文链接：https://blog.csdn.net/sinat_38328891/article/details/79468416

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React系列五（React-Props）

一、使用React Props

state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义state来更新和修改数据。而子组件只能通过props来传递数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用props</title>
    <!-- 引入React三个文件-->
    <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="text"></div>
    <script type="text/babel">
        var SayHello=React.createClass({
            render:function(){
                return <p>Hello {this.props.name}</p>;
            }
        });
        ReactDOM.render(
                <SayHello name="pangtong" />,
                document.getElementById("text")
        );
    </script>
</body>
</html>

二、通过 getDefaultProps() 方法为 props 设置默认值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为props设置默认值</title>
    <!-- 引入React三个文件-->
    <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="text"></div>
    <script type="text/babel">
        var SayHello=React.createClass({
            getDefaultProps:function(){
              return {
                  name:'pangpang'
              };
            },
            render:function(){
                return <p>Hello {this.props.name}</p>;
            }
        });
        ReactDOM.render(
                <SayHello />,
                document.getElementById("text")
        );
    </script>
</body>
</html>

三、组合使用State和Props

在应用中组合使用state和props,可以在父组件中设置state，并通过在子组件上使用props将其传递到子组件上。
在render函数中获取父组件传递过来的数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在应用中组合使用state和props</title>
    <!-- 引入React三个文件-->
    <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="text"></div>
    <script type="text/babel">
        var Name = React.createClass({
            render:function(){
                return (
                        <p>{this.props.name}</p>
                );
            }
        });
        var Link = React.createClass({
            render:function(){
                return (
                        <a href={this.props.site}>
                           {this.props.site}
                        </a>
                );
            }
        });
        var WebSite = React.createClass({
            getInitialState:function(){
                return {
                   name:'百度',
                   site:'https://www.baidu.com'
                };
            },
            render:function(){
                return (
                        <div>
                            <Name name={this.state.name} />
                            <Link site={this.state.site} />
                        </div>
                );
            }
        });
        ReactDOM.render(
                <WebSite />,
                document.getElementById("text")
        );
    </script>
</body>
</html>