Question

完成reactjs教程，发现这个（IMO）整洁的小功能，它将反应参数的解构演示为JSX对象，如下所示：

import React, { Component } from 'react';

export default class MyButton extends Component {
    render() {
        return (
            <a {...this.props} >Discover Things!</a>
        );
    };
}

和使用示例：

<MyButton className='btn btn-primary' href="//02geek.com" target="_blank" />

结果：

<a class="btn btn-primary" href="//02geek.com" target="_blank" >Discover Things!</a>

我越是看着这个并谷歌为它，我越来越困惑。谁/什么负责从客户端传递属性，然后从MyButton组件的...表示法，将其格式化为这样？

我假设这是react / jsx hocus pocus？我不包括任何我知道可能会这样做的第三方变形金刚。现在非常基本的东西。

Answer 1

当您使用自定义组件MyButton时，它看起来有点像您正在设置某些属性的HTML标记（例如className和href）。但您实际上是在设置组件（MyButton）属性（或props）。因此，如果您在console.log(this.props.className)内执行MyButton，则会（在此示例中）打印“btn btn-primary”。

因此，您使用<MyButton className='btn btn-primary' href="//02geek.com" target="_blank" />时设置的所有道具都将在MyButton内通过this.props提供。

MyButton内发生的事情是this.props对象（值{ className: 'btn btn-primary'}}和spreads的对象变为普通<a> - 标签。这意味着a-tag将这些值作为属性传递下来。所以在这个例子中，它恰恰相当于：

<a clasName={this.props.className} href={this.props.href} target={this.props.target} >Discover Things!</a>

JSX (read slightly more here)，它允许我们以这种方式处理Javascript内部的HTML，将上述内容转换为

React.createElement(
  'a', 
  { 
     className: "btn btn-primary",
     href: "//02geek.com",
     target: "_blank"
  },
  "Discover Things!"
);

作为最后一步，React还将最终从“className”转换为just =“class”（“class”不能在Javascript中使用，因为它是aa reserved word）。

因此，当完成所有这些步骤后，React会将React.createElement调用转换为您可以在浏览器中看到的实际DOM元素。在这种情况下，输出为：

<a class="btn btn-primary" href="//02geek.com" target="_blank" >Discover Things!</a>

Answer 2

所以这就是我要找的答案...... https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81

JSX扩展了spread（...）运算符的功能以包含对象，并建议将此功能添加到ES7规范中。

Reactjs：params的解构和格式化？

2 个答案: