Phản ứng: thêm các đạo cụ vào một thành phần hiện có

Question

Tôi đang cố gắng tìm ra cách sao chép một phần tử hiện có bằng các đạo cụ bổ sung.

Để tham khảo:

this.mainContent = <Hello message="Hello world!" /> 

Tôi đã cố gắng để làm một cái gì đó giống như

React.createElement(this.mainContent, Object.assign({}, 
    this.mainContent.props, { anotherMessage: "nice to meet ya!" })); 

nhưng nó không làm việc.

Làm cách nào để thực hiện điều này?

Answer 1

Bạn cần phải sao chép các phần tử và thêm các đạo cụ bổ sung sử dụng React.cloneElement ví dụ:

var clonedElementWithMoreProps = React.cloneElement(
    this.mainContent, 
    { anotherMessage: "nice to meet ya!" } 
); 
// now render the new cloned element? 

Answer 2

React.createElement() mất hoặc là một chuỗi hoặc một Phản ứng kiểu lớp như tham số đầu tiên của nó, do đó sẽ không hoạt động nếu bạn' đang cố gắng sao chép một phần tử.

Tất nhiên, there's React.cloneElement() instead, bản sao sâu của phần tử React khác và có thể tùy chọn cung cấp đạo cụ mới.

var foo = React.cloneElement(this.mainContent, {anotherMessage: "nice to meet ya!"}); 

Nên hoạt động.