Скажем, у меня есть 3 подпорки, которые требует и реализует мой компонент на основе классов, т.е.

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

Как бы мне передать другие реквизиты, которые я изначально не ожидал, но сказал бы, что кто-то другой, использующий мой компонент, захочет использовать?

Я подумал

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

Но я обеспокоен дублированием опоры

49
Ilja 8 Янв 2017 в 18:10

3 ответа

Лучший ответ

Используйте оператор распространения

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

Таким образом, ваш пример станет:

const {propOne, propTwo, children, ...props} = this.props;
<Component propOne={propOne} propTwo={propTwo} {...props}>
  {children}
</Component>
58
Kousha 20 Авг 2019 в 19:55

Попробуйте отправить все свойства как объект под одним именем свойства. именно так

class ParentComponent extends Component{

    state={
      person:{
         id=1,
         name="rashid",
         family="behnam"
             }
         }
render(){
return <ChildComponent wholething={this.state.person} />
        }
}
//------------------------------------------
class ChildComponent extends Component{
render(){
     const {id,name,family}=this.props.wholething;
         return (
                <div someId={id}>
                   <h3>My name is :{name}</h3>
                   <h4>My family is :{family}</h4>
                </div>
                );
      }
}
0
rashid behnam 23 Мар 2020 в 12:52

Фильтровать их?

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>
0
Maciej Chałapuk 8 Янв 2017 в 15:26