コンポーネントを拡張して別のロジックを作成する

Question

ロジックを持つコンポーネントがあり、ロジックがない同じコンポーネントが必要です。私はロジックを持たない純粋なコンポーネントを作りたいと思っています。元のロジックを置くためにこのコンポーネントを拡張したいので、元のロジックまたはコンポーネントをロジックなしで使用することができます。それは私がコンポーネントのサブセットを必要としているように私はコピーしたくないです。私は違いを抽出したいので、私はあなたに完全なコンポーネントか、その一部だけを渡すことができます。

ロジックでコンポーネントの子としてロジックなしのコンポーネントを処理する以外にも、これを反応で行うことはできますか？これを行うには何が最善でしょうか？私はそれがHOCの問題だとは思わない。

Answer 1

私は、このアプローチはあなたを助けることができますね：こんにちは、https://jsfiddle.net/ginollerena/69z2wepo/71540/

const TextElement = (props) => (
     <input type="text"    
       defaultValue={props.value} 
       onChange={props.handleChange} 
       placeholder={props.placeholder}/> 
); 

const TextAreaElement = (props) => (
     <textarea    
       defaultValue={props.value} 
       onChange={props.handleChange} 
       placeholder={props.placeholder}/> 

); 

let Mixing = InnerComponent => class extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { value :''} 
    this._handleChange = this._handleChange.bind(this); 
    } 

    _handleChange(e) { 
    const value = e.target.value; 
    this.setState({value:value}); 
    } 

    render(){ 
    return(<InnerComponent value={this.state.value} handleChange={this._handleChange} />) 
    } 

}; 

const MyTextComponent = Mixing(TextElement); 
const MyTextAreaComponent = Mixing(TextAreaElement); 



ReactDOM.render(
    <MyTextComponent />, 
    document.getElementById('container') 
);