在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

React.js 給組件屬性賦值的展開運算符應該怎么理解?

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

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

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

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

，這樣寫為什么會報錯呢？

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

非要這樣寫才正確... 這里很迷惑，不知道這個'...'符號到底做了什么，

回答
編輯回答
局外人

因為這里并不是標準的 js 語法啊。

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

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

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

那么對于 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}相當于

<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ù)，并且變成一個數(shù)組，
再看一個：

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

callMe(1, 2, 3);

allArgs只收集了兩個參數(shù)，因為第一個參數(shù)被a拿走。

我們再來看下解構(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時，用了rest語法，數(shù)組的值都會被分解成各個參數(shù)。

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

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

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