spread syntax “…this.props” in reactjs feels odd

问题

Using the spread operator in react with objects like props within JSX seems not to output what I expect.

<Text {...this.props} />

seems to be rendered into style="foo", where it should be style:"foo" as documented here. I couldn't find this documented anywhere. I'm totally new to react and I'm trying to understand the syntax and wonder if react does undocumented stuff like this internally.

A simple test just underlined my confusion:

const x = {...{test:1}}.test;
alert(x);

alerted

1

And this for sure doesn't compile:

<Text test: 1 />

回答1:

This is documented in the React documentation here.

To copy paste here, it states:

If you already have props as an object, and you want to pass it in JSX, you can use ... as a “spread” operator to pass the whole props object.

It is perfectly valid, documented JSX.

Furthermore, they provide an example of two different methods of passing props to a component-- one as discrete attributes and one as a spread object-- and note that they are the same as far as the component receiving the props is concerned:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Extending this to your above above example, you can think of these two as equivalent:

function App1() {
    return <Text test={1} />;
}

function App2() {
    const props = {test: 1};
    return <Text {...props} />;
}

As far as the specifics of how it works under the hood, remember that this is a transpilation, so we don't necessary need to concern ourselves to much with how it is working under the hood-- so long as you know that they are equivalent and one is a "shortcut" you should be fine.

Also worth noting that the documentation specifies that the spreading approach should be used sparingly, because "spread attributes can be useful but they also make it easy to pass unnecessary props to components that don’t care about them or to pass invalid HTML attributes to the DOM."

Hope this helps clarify things for you!

回答2:

Destructuring extracts key-value pairs from an object.

Take a look at this example

const obj = {
  a: 'a',
  b: 'b'
}

Now, destructuring obj will result in

const { a, b } = obj;
console.log(a);  // 'a'
console.log(b);  // 'b'

If you destructure an object while being passed as props for a React Component, this is what happens

<Component {...obj} />

This will internally be converted to

<Component a={a} b={b} />

So if you are passing styles as props to a Component, it should be done as

const style = {
  background:'yellow'
} 

<Component style={style} />

const obj = {
  style = {
      background:'yellow'
    } 
}

<Component {...obj} />

来源：https://stackoverflow.com/questions/53018148/spread-syntax-this-props-in-reactjs-feels-odd

标签

javascript

reactjs

spread-syntax