javascript - 无法让 HOC 模式在 React 中工作

Question

我正在试验 HOC 组件，但它在浏览器中的呈现方式似乎存在一些问题。 HOC 代码是 -

var HOC=(InnerComp)=> class extends React.Component{
  render(){
    return <InnerComp {...this.props} c="d"/>
  }
};

问题是当我将 HOC 与这样的组件一起使用时，c="d"属性在内部组件上不可见 -

class MyTextArea extends React.Component{

render(){
      return (
          <textarea b="c"/>
      );
  }
}
var ControlledTA=HOC(MyTextArea);

现在，如果我在我的页面中使用 ControlledTA 组件，在浏览器中，如果我执行检查元素，textarea 元素的属性中只有 b="c"，而 c="d"不存在。

ReactDOM.render(
  <div><ControlledTA /></div>,
  document.getElementById('root')
);

如果我像这样编写内部组件的渲染函数，我只能让它工作 -

render(){
    return (
          <textarea b="c" {...this.props} />
    );
}

这表明内部组件必须意识到它需要渲染一些它将继承的外部属性，这看起来很奇怪。

任何人都可以确认这是否是它应该如何工作的，或者我是否做错了什么？

更新

对于任何正在寻找正确方法的人(根据答案)-新的内部组件 -

const MyInput=(props)=> {
   return (
       <div><input type="text" name="typeahead" value={props.data} onChange= 
             {props.onChange}/>
       </div>
   );
 }

新 HOC -

function controlledForm(Mycomponent){
   return class extends React.Component{
    constructor(props){
        super(props);
        this.state={value:''};
        this.handleChange=this.handleChange.bind(this);
    }

    handleChange(e){
        this.setState({value:e.target.value});
    }
    render(){
        return <Mycomponent {...this.props} data={this.state.value} onChange={this.handleChange} />;
    }
  }
};

Answer 1

长话短说:组件是承载 Prop 的东西，而不是根 HTML 元素。

<textarea b="c"/>只会有 b 的 Prop 因为那是你传递给它的唯一 Prop 。

HOC 将 prop 传递给内部组件，即 MyTextArea , 这个组件有属性 c .

这也是你传播MyTextArea的 Prop 时出现的原因使用 this.props .

来自docs :

Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

And that’s it! The wrapped component receives all the props of the container, along with a new prop, data, which it uses to render its output. The HOC isn’t concerned with how or why the data is used, and the wrapped component isn’t concerned with where the data came from.

const HOC=(InnerComp)=> class extends React.Component{
  render(){
    return <InnerComp {...this.props} c="d"/>
  }
};

class MyTextArea extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log("Props from Parent", this.props);
    return (
      <textarea a="b" defaultValue={"Props from Parent: "+ this.props.c}>
      </textarea>
    );
  }
}

const Enhanced = HOC(MyTextArea);


ReactDOM.render(<Enhanced />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>