구성 요소를 확장하여 다른 구성 요소에 논리를 작성하십시오.

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