Question

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

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

问题是c =＆＃34; d＆＃34;当我使用具有诸如此类的组件的HOC时，在内部组件上看不到prop -

class MyTextArea extends React.Component{

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

现在如果我在我的页面中使用ControlledTA组件，在浏览器中，如果我执行一个inspect元素，则textarea元素只有b =＆＃34; c＆＃34;在其属性和c =＆＃34; d＆＃34;不存在。

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

TL; DR ：组件是带有props的组件，而不是根HTML元素。

<textarea b="c"/>只有b的道具，因为这是你传递给它的唯一道具。

HOC正在将道具传递给内部组件MyTextArea，此组件具有道具c。

这也是您使用MyTextArea传播this.props道具时出现的原因。

来自docs：

请注意，HOC不会修改输入组件，也不会使用它   继承来复制其行为。相反，HOC组成原始   组件通过将其包装在容器组件中。 HOC是纯粹的   具有零副作用的功能。

就是这样！包裹的组件接收所有的道具   容器，以及一个新的prop，data，用于呈现它   输出。 HOC并不关心数据的使用方式和原因，以及   包装组件不关心数据的来源。

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法在Hact中使用HOC模式

1 个答案: