鍍金池/ 問答/HTML5  Python  HTML/ React.js 給組件屬性賦值的展開運(yùn)算符應(yīng)該怎么理解?

React.js 給組件屬性賦值的展開運(yùn)算符應(yīng)該怎么理解?

創(chuàng)建一個(gè)組件然后渲染到頁面上:

class person extends React.Component{

    constructor(name,age)
    {
        this.name = name;
        this.age = age;
    }
    
   
    render(){
       return( <div>{this.props.name}--{this.props.age}</div>);
    }

}

const data = {
     name:'張三',
     age:12
}


ReactDom.render(<Person {...data}></Person>,document.getElementById('app') )

我的問題是,
...代表展開運(yùn)算符，在這里我的理解 ...data 相當(dāng)于把data給解構(gòu)賦值了吧？，
如果是解構(gòu)賦值的話，

ReactDom.render(<Person { "name":"張三","age":12 }></Person>,document.getElementById('app') )

，這樣寫為什么會(huì)報(bào)錯(cuò)呢？

   <Movie name={user.name} age={user.age} gender={user.gender}></Movie>

非要這樣寫才正確... 這里很迷惑，不知道這個(gè)'...'符號(hào)到底做了什么，

回答
編輯回答
局外人

因?yàn)檫@里并不是標(biāo)準(zhǔn)的 js 語法啊。

那么既然不標(biāo)準(zhǔn)，React 想讓 {...data} 映射到（包括但可以不限于）下面兩種模式:

  • {key1: val1, key2: val2, ...}
  • key1={data.val1} key2={data.val2} ...

哪一種都是它說了算，畢竟這個(gè)地方是 <Person ...>...</Person> 這個(gè)JSX 的地盤。

那么對(duì)于 JSX 來說，顯然第二種才是符合它的語法的。

2017年8月15日 13:32
編輯回答
幼梔

把 JSX 轉(zhuǎn)化一下容易理解

const data = {
  name: '張三',
  age: 12
}
<Person name={data.name} age={data.age}></Person>

const element = {
  elementName: 'Person',
  props: {
    name: data.name,
    age: data.age
  }
};

{...data}相當(dāng)于

<Person {...data}></Person>

const element = {
  elementName: 'Person',
  props: {
    ...data
  }
};
2017年8月14日 17:03
編輯回答
糖豆豆

這是es6的rest語法。比如這樣寫

function callMe(...allArgs) {
  console.log(allArgs); // [1, 2, 3];
}

callMe(1, 2, 3);

callMe的參數(shù)用了rest語法，代表allArgs要收集所有剩下的參數(shù)，并且變成一個(gè)數(shù)組，
再看一個(gè)：

function callMe(a, ...allArgs) {
  console.log(allArgs); // [2, 3];
}

callMe(1, 2, 3);

allArgs只收集了兩個(gè)參數(shù)，因?yàn)榈谝粋€(gè)參數(shù)被a拿走。

我們?cè)賮砜聪?strong>解構(gòu)

function callMe(a, b, c) {
  console.log(a, b, c); // 1 2 3;
}

const arr = [1, 2, 3];
callMe(...arr);

調(diào)用callMe時(shí)，用了rest語法，數(shù)組的值都會(huì)被分解成各個(gè)參數(shù)。

而你提供的也是解構(gòu)，但是不是這種形式：

// 原句
data = {name: "張三", age: 12};
<Person {...data}></Person>

// 相等于
<Person name={data.name} age={data.age}></Person>
2017年4月27日 22:38