擴展組件以在另一箇中創建邏輯

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') 
);