react属性传递操作符...

最新推荐文章于 2023-09-01 13:16:56 发布

三月泡

最新推荐文章于 2023-09-01 13:16:56 发布

阅读量191

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/judyjie/article/details/92848371

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    var destination = document.querySelector("#container");

    var Display = React.createClass({
        render: function () {
            return (
                <div>
                    <p>{this.props.color}</p>
                    <p>{this.props.num}</p>
                    <p>{this.props.size}</p>
                </div>
            );
        }
    });

    var Label = React.createClass({
        render: function () {
            return (
                <Display
                    color={this.props.color}
                    num={this.props.num}
                    size={this.props.size}
                />
            );
        }
    });

    var Shirt = React.createClass({
        render: function () {
            return (
                <Label
                    color={this.props.color}
                    num={this.props.num}
                    size={this.props.size}
                />
            );
        }
    });

    ReactDOM.render(
        <div><Shirt color="deepblue" num="3.14" size="medium"/></div>, destination
    );
</script>
</body>
</html>

等价于

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.24.0/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    var destination = document.querySelector("#container");

    var Display = React.createClass({
        render: function () {
            return (
                <div>
                    <p>{this.props.color}</p>
                    <p>{this.props.num}</p>
                    <p>{this.props.size}</p>
                </div>
            );
        }
    });

    var Label = React.createClass({
        render: function () {
            return (
                <Display
                    {...this.props}
                />
            );
        }
    });

    var Shirt = React.createClass({
        render: function () {
            return (
                <Label
                    {...this.props}
                />
            );
        }
    });

    ReactDOM.render(
        <div><Shirt color="deepblue" num="3.15" size="medium"/></div>, destination
    );
</script>
</body>
</html>

注意上面2段代码的不同在于：

<Display
    {...this.props}
/>

等价于

<Display
    color={this.props.color}
    num={this.props.num}
    size={this.props.size}
/>

减少了代码的重复编写！！！

三月泡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react属性传递操作符...

代码一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="react.min.js"></script> <scrip...
复制链接

扫一扫