主页 / 问题 / 559898
Accepted
pravosleva
Asked:2020-08-27 04:34:24 +0800 CST2020-08-27 04:34:24 +0800 CST

ReactJS：解释 {...this.props} 条目

  • 772

使用示例（模态窗口调用按钮）：

var Example = React.createClass({
  render: function() {
    //var modal=...
    return (
      <div className="example">
        //{modal}
        <BootstrapButton onClick={this.openModal} className="btn-default">
          Open modal
        </BootstrapButton>
      </div>
    );
  },
  openModal: function() {
    // action...
  }
});

var BootstrapButton = React.createClass({
  render: function() {
    return (
      <a {...this.props}
        href="javascript:;"
        role="button"
        className={(this.props.className || '') + ' btn'} />
    );
  }

ReactDOM.render(<Example />, document.getElementById('container'));
reactjs

2 个回答

  1. Best Answer

    这个条目的意思很简单：“把props这个组件的所有东西都扔到一个子组件中”。

    这种语法称为spread operator.
    在 JSX 中，它的工作方式类似于“新 javascript”，ecmascript-2015，其中为数组引入了这种语法：省略号后面的可迭代集合被该集合的元素序列替换。

    嗯，是的，当然，在官方文档中有一个部分回答了这个问题。

    • 3

  2. 复制当前组件的this.props对象的内容，将其作为属性粘贴到指定标签中，分别以属性名作为属性名，其值作为属性值。

    显然，这是 ECMAScript 2015 标准新趋势的体现。

    • 2

相关问题