zoukankan      html  css  js  c++  java
  • {...this.props}是props所提供的语法糖,可以将父组件的所有属性复制给子组件

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>...this.props</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
     
    <div id="xpf"></div>
    <script type="text/babel">
    class Xpf extends React.Component {
      render() {
        return (
          <div>
            <a {...this.props}>{this.props.name}</a>
          </div>
        );
      }
    }
     
    ReactDOM.render(
        <Xpf href="https://blog.csdn.net/qq_42720683" name='我只是一个测试'/>,
        document.getElementById('xpf')
    );
     
    </script>
     
    </body>
    </html>

    在子组件Xpf中,本来没有href属性,但是父组件有href和name属性,子组件Xpf使用了{...this.props}后,就可以拿到父组件中的href属性,

  • 相关阅读:
    Python爬虫_分布式爬虫
    Python爬虫_selenium
    Python爬虫_scrapy框架
    Python爬虫_高性能爬取
    Python爬虫_三种数据解析方式
    Python爬虫_requests模块
    Django
    Python爬虫相关基础概念
    MySQL 多表结构的创建与分析
    mysql
  • 原文地址:https://www.cnblogs.com/itgezhu/p/12367414.html
Copyright © 2011-2022 走看看