React 中的这三个点有什么作用? [英] What do these three dots in React do?

问题描述

... 在这个 React(使用 JSX)代码中做了什么，它叫什么?

解决方案

那是 财产传播符号.它是在 ES2018 中添加的(用于数组/迭代的传播更早，ES2015)，但它在 React 项目中通过转译得到了很长时间的支持(如JSX 传播属性" 即使你也可以在其他地方做，而不仅仅是属性).

{...this.props} 将 props 中自己的"可枚举属性作为 上的离散属性展开您正在创建的模态 元素.例如，如果 this.props 包含 a: 1 和 b: 2，则

和

一样

但它是动态的，所以包括 props 中的任何自己的"属性.

由于 children 是 props 中的一个自己的"属性，spread 将包含它.所以如果出现这个的组件有子元素，它们将被传递到 Modal.将子元素放在开始标记和结束标记之间只是语法糖   善良的 —用于在开始标记中放置 children 属性.示例:

class Example extends React.Component {使成为() {const { className, children } = this.props;返回 (
{孩子们}
);}}ReactDOM.render([<示例类名=第一个"><span>孩子在第一个</span></示例>,<Example className="second" children={<span>Child in second</span>}/>],document.getElementById("root"));

.first {颜色:绿色；}.第二 {颜色:蓝色；}

<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>

Spread notation 不仅适用于该用例，而且适用于创建具有现有对象的大部分(或全部)属性的新对象 —当您更新状态时会经常出现这种情况，因为您无法直接修改状态:

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

将 this.state.foo 替换为一个新对象，该对象具有与 foo 相同的所有属性，除了 a 属性，它变成 <代码>更新":

const obj = {富:{一:1，乙:2，丙:3}};控制台日志(原始"，obj.foo)；//创建一个 NEW 对象并将其分配给 `obj.foo`obj.foo = {...obj.foo, a: 更新"};console.log("更新", obj.foo);

.as-console-wrapper {最大高度:100%！重要；}

What does the ... do in this React (using JSX) code and what is it called?

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

解决方案

That's property spread notation. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).

{...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then

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

would be the same as

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

But it's dynamic, so whatever "own" properties are in props are included.

Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to Modal. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag. Example:

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>

Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:

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

That replaces this.state.foo with a new object with all the same properties as foo except the a property, which becomes "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 中的这三个点有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！