ความหมายของ {… this.props} ใน Reactjs คืออะไร

ความหมายของ

{...this.props}

ฉันพยายามจะใช้มันแบบนั้น

 <div {...this.props}> Content Here </div>

เรียกว่าคุณสมบัติการแพร่กระจายและจุดมุ่งหมายคือทำให้การส่งผ่านอุปกรณ์ประกอบฉากง่ายขึ้น

ให้เราจินตนาการว่าคุณมีส่วนประกอบที่ยอมรับคุณสมบัติ N จำนวน การผ่านสิ่งเหล่านี้ไปอาจเป็นเรื่องที่น่าเบื่อและเทอะทะหากจำนวนเพิ่มขึ้น

<Component x={} y={} z={} />

ดังนั้นแทนที่จะทำเช่นนี้ให้ห่อไว้ในวัตถุและใช้สัญกรณ์การแพร่กระจาย

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

ซึ่งจะแกะมันลงในอุปกรณ์ประกอบฉากบนส่วนประกอบของคุณกล่าวคือคุณ "ไม่" ใช้{... props}ภายในrender()ฟังก์ชันของคุณก็ต่อเมื่อคุณส่งอุปกรณ์ประกอบฉากลงไปยังส่วนประกอบอื่น this.props.xใช้อุปกรณ์ประกอบฉากแตกได้ตามปกติ

มันคือ ES6 Spread_operatorและDestructuring_assignment.

<div {...this.props}>
  Content Here
</div>

มันเท่ากับ Class Component

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div>
              <h3> Person Information: </h3>
              <ul>
                <li>name={name}</li>
                <li>age={age}</li>
                <li>country={country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <TestDemo {...person}/>
    , mountNode
);

หรือ Function component

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

refs

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://facebook.github.io/react/docs/components-and-props.html

มันจะรวบรวมสิ่งนี้:

React.createElement('div', this.props, 'Content Here');

ดังที่คุณเห็นด้านบนมันส่งผ่านอุปกรณ์ประกอบฉากทั้งหมดไปยังไฟล์div.

เป็นคุณสมบัติ ES-6 หมายความว่าคุณดึงคุณสมบัติทั้งหมดของอุปกรณ์ประกอบฉากออกมา div.{... }

ตัวดำเนินการใช้เพื่อดึงคุณสมบัติของวัตถุ

คุณจะใช้อุปกรณ์ประกอบฉากในองค์ประกอบลูกของคุณ

ตัวอย่างเช่น

หากอุปกรณ์ประกอบฉากตอนนี้ของคุณคือ

{
   booking: 4,
   isDisable: false
}

คุณสามารถใช้อุปกรณ์ประกอบฉากนี้ในคอมโพเน็ตสำหรับเด็กของคุณ

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

ในองค์ประกอบลูกของคุณคุณจะได้รับอุปกรณ์ประกอบฉากของพ่อแม่ทั้งหมด