Làm thế nào để vượt qua tất cả các đạo cụ khác để phản ứng lớp học?

Question

Nói rằng tôi có 3 đạo cụ mà lớp dựa thành phần của tôi đòi hỏi và thực hiện tức là

<Component propOne={this.props.one} propTwo={this.props.two}> 
    {this.props.children} 
</Component> 

thế nào tôi sẽ vượt qua xuống bất kỳ đạo cụ khác mà tôi ban đầu không mong đợi, nhưng nói người khác sử dụng phần tôi muốn sử dụng?

Tôi đã suy nghĩ

<Component propOne={this.props.one} propTwo={this.props.two} {...this.props} > 
    {this.props.children} 
</Component> 

Nhưng lo ngại về sự trùng lặp prop

Answer 1

Sử dụng các nhà điều hành lây lan

let {propOne, propTwo, ...leftOver} = this.props; 
// `leftOver` contains everything except `propOne` and `propTwo` 

Vì vậy, ví dụ của bạn sẽ trở thành:

const {propOne, propTwo, children, ...props} = this.props; 
<Component propOne={propOne} propTwo={propTwo} {...props}> 
    {children} 
</Component> 

Answer 2

Lọc họ?

function without(props, keys) { 
    return Object.keys(props) 
    .filter((key) => keys.indexOf(key) !== -1) 
    .reduce((retVal, key) => { 
     retVal[key] = props[key]; 
    }, {}); 
} 

<Component propOne={this.props.one} propTwo={this.props.two} {...without(this.props, ['one', 'two'])} > 
    {this.props.children} 
</Component>