React中HOC模式无法正常工作，传入的props未生效

嘿，我一眼就瞅出问题所在啦！你的MyTextArea组件压根没把接收到的props用到内部的<textarea>上，HOC传的c="d"自然就“隐身”了～

问题根源 #

你当前的MyTextArea只是硬编码了<textarea b="c"/>，完全没有读取或渲染this.props里的任何内容，HOC注入的c="d"根本没机会出现在DOM里。

修复方案 #

只需要让MyTextArea把接收的props传递给内部的<textarea>就行，推荐用展开运算符，这样所有props（包括HOC加的和你自己传的）都会被自动应用：

class MyTextArea extends React.Component {
  render() {
    // 用{...this.props}把所有props展开到textarea上
    return <textarea b="c" {...this.props} />;
  }
}

完整可运行代码示例 #

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

class MyTextArea extends React.Component {
  render() {
    // 可以在控制台打印props，确认c属性已经接收到了
    console.log("当前组件props:", this.props);
    return <textarea b="c" {...this.props} />;
  }
}

var ControlledTA = HOC(MyTextArea);

可选：选择性传递属性 #

如果你不想把所有props都传给<textarea>，也可以单独指定需要的属性：

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

这样修改后，HOC传递的c="d"就会正常出现在<textarea>元素上啦！

内容的提问来源于stack exchange，提问作者Perx