React中的这三个点是做什么的？

  • Z时代
  • 2024-01-10
  • 分类：问答

什么是...在这个做反应（使用JSX）代码，什么是它叫什么名字？

<Modal {...this.props} title='Modal heading' animation={false}>

回答：

那是 财产传播符号

。它是在ES2018中添加的（用于数组/可迭代对象的版本早于ES2015），但是它在React项目中已经通过翻译长期得到支持（“

JSX传播属性

”，即使您也可以在其他地方这样做） ）。

{...this.props}将 “自己的”可枚举属性props作为离散属性 散布

在Modal要创建的元素上。例如，如果this.props包含a: 1和b: 2，则

<Modal {...this.props} title='Modal heading' animation={false}>

将与

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

但是它是动态的，因此包括了所有“自有”属性props。

由于children是中的“拥有”属性props，因此传播将包括它。因此，如果出现此内容的组件具有子元素，则将它们传递给Modal。在开始标签和结束标签之间放置子元素只是语法上的糖-

一种children在开始标签中放置属性的好方法。例：

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);
.first {
  color: green;
}
.second {
  color: blue;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便-在更新状态时会遇到很多问题，因为您无法修改状态直：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

该this.state.foo属性将替换为具有与该属性相同的所有属性的新对象，foo该a属性变为"updated"：

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
.as-console-wrapper {
  max-height: 100% !important;
}

以上是 React中的这三个点是做什么的？ 的全部内容， 来源链接： utcz.com/qa/427412.html

回到顶部