Ý nghĩa của {Hoài this.props} trong Reactjs là gì

Ý nghĩa của

{...this.props}

Tôi đang cố gắng sử dụng nó như thế

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

Nó được gọi là thuộc tính lây lan và mục đích của nó là làm cho việc chuyển đạo cụ trở nên dễ dàng hơn.

Hãy để chúng tôi tưởng tượng rằng bạn có một thành phần chấp nhận N số thuộc tính. Vượt qua những điều này có thể là tẻ nhạt và khó sử dụng nếu số lượng tăng lên.

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

Do đó, thay vì bạn làm điều này, hãy bọc chúng trong một đối tượng và sử dụng ký hiệu lây lan

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

sẽ giải nén nó vào các đạo cụ trên thành phần của bạn, tức là bạn "không bao giờ" sử dụng {... props}bên trong render()chức năng của mình , chỉ khi bạn chuyển các đạo cụ xuống thành phần khác. Sử dụng đạo cụ giải nén của bạn như bình thường this.props.x.

Đó là ES6 Spread_operatorvà Destructuring_assignment.

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

Nó bằng 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
);

hoặc là 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
);

ref

• https://babeljs.io/docs/plugins/transform-object-rest-s lây /

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

Nó sẽ biên dịch thành này:

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

Như bạn có thể thấy ở trên, nó chuyển tất cả các đạo cụ của nó cho div.

Đây là tính năng ES-6. Nó có nghĩa là bạn trích xuất tất cả các thuộc tính của đạo cụ trong div.{... }

toán tử được sử dụng để trích xuất các thuộc tính của một đối tượng.

Bạn sẽ sử dụng đạo cụ trong thành phần con của bạn

ví dụ

nếu đạo cụ thành phần bây giờ của bạn là

{
   booking: 4,
   isDisable: false
}

bạn có thể sử dụng đạo cụ này trong compoenet con của bạn

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

trong thành phần con của bạn, bạn sẽ nhận được tất cả các đạo cụ cha mẹ của bạn.