React extends defautProps

Question

Я все еще на пути к завоеванию React. Я предпочитаю использовать компонентный подход на основе es6 при создании классов React. И я задержался в тот момент, когда необходимо наследовать какой-то существующий класс с уже определенным staticProps статическим свойством.

import {Component} from 'react'; 

class MyBox extends Component { 

} 

// Define defaultProps for MyBox 
MyBox.defaultProps = { 
    onEmptyMessage: 'Nothing at here' 
} 

Когда я определить статические defaultProps свойств класса, которые простираются MyBox, он полностью переписывает defaultProps из родительского класса.

class MyItems extends MyBox { 
    render() { 
     // this.props.onEmptyMessage is undefined here 
     // but this.props.onRemoveMessage is present 
     return <i>{this.props.onEmptyMessage}</i>; //<i></i> 
    } 
} 
// Define defaultProps for MyItems 
MyItems.defaultProps = { 
    onRemoveMessage: 'Are you sure?' 
} 

Но мне нужно расширить defaultProps родительского класса, а не перезаписывать. Я понимаю, что это возможно, распространяя непосредственно свойство defaultProps родительского класса.

MyItems.defaultProps = _.extend(MyBox.defaultProps, { 
    onRemoveMessage: 'Are you sure?' 
}); 

Но я думаю, что такой трюк грязный. Есть ли способ выполнить его в соответствии с планом React?

Answer 1

По-моему, проблема заключается не в том, как вы можете объединить свойства, а в том, как вы можете составить его, не расширяя. Вы бы свои компоненты, как это:

class MyBox extends Component { 

    static defaultProps = { title: 'Box title' } 

    render() { 
    return (
     <div className={'mybox ' + this.props.className}> 
      <h1>{this.props.title}</h1> 
      {this.prop.children} 
     </div> 
    ) 
    } 

} 

class MyItems extends Component { 

    render() { 
    return (
     <MyBox className="itembox" title="Items title"> 
      <i>{this.props.children}</i> 
     </MyBox> 
    ) 
    } 

} 

Затем используйте его как что

<MyBox> 
    box 
</MyBox> 

или

<MyItems> 
    items box 
</MyItems> 

Это будет оказывать:

<div class="mybox"> 
    <h1>Box title</h1> 
    box 
</div> 

или

<div class="mybox itembox"> 
    <h1>Items title</h1> 
    <i>items box</i> 
</div> 

Похоже, что у вас есть расширение/переопределение имени класса или названия, но вы создали. Если вы используете этот способ построения своего пользовательского интерфейса, вы увидите, что будет проще и быстрее