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

扩展组件以在另一个组件中创建逻辑

1 个答案: