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

我有一个有一些逻辑的组件，我想要一个没有逻辑的组件。我想构建一个没有任何逻辑的纯组件，我想扩展这个组件来放置原始逻辑，这样我就可以使用带有原始逻辑的组件或者没有任何逻辑的组件。就像我需要组件的一个子集，我不想复制。我想提取差异，这样我就可以为您提供完整的组件或只是其中的一部分

---

除了将没有逻辑的lhe组件视为具有逻辑的组件的子组件之外，我还可以在react中执行此操作吗？做这件事最好的方式是什么？我不认为这是一个临时问题。

我想这种方法可以帮助您：

const TextElement=（道具）=>(
);
const TextAreaElement=（道具）=>(
);
让Mixing=InnerComponent=>类扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}
this.\u handleChange=this.\u handleChange.bind（this）；
}
_手变（e）{
常量值=e.target.value；
this.setState（{value:value}）；
}
render（）{
返回（）
}
};
常量MyTextComponent=混合（TextElement）；
const MyTextAreaComponent=混合（TextAreaElement）；
ReactDOM.render(
,
document.getElementById（'容器'）
);

你好，谢谢你的回答，但这不是我想要的。这更像是HOC，我不想这样。让我试着更好地解释。考虑一个选项卡组件。我想要一个选项卡组件，它的逻辑是更改活动选项卡，但它不在选项卡组件内。但是我想要一个管理这个活动选项卡的组件，在没有逻辑的情况下扩展这个原始选项卡组件。所以我可以使用原始组件，或者使用逻辑组件？我说得更清楚了吗？

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