reactjs - React JS - 使用 HOC 时出现不变违规错误

Question

在学习反应中的高阶组件时，我试图在我的代码中使用它。这样做时，我收到“不变违规错误”

//Higher Order Component
const withStyles = (OriginalComponent) => {
  class NewComponent extends React.Component{
    render(){
      return <OriginalComponent />  
    }
  }
  return NewComponent;
}

class FancyButton extends React.Component {
  render() {
    return <button>Fancy button</button>;
  }
}


const App = props => {
//I am calling the HOC to get my updated component
  let Enhanced = withStyles(<FancyButton />);

  return (
      <Enhanced />
  );
};

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

在这里，我调用 HOC(withStyles) 并将返回的组件存储在变量“Enhanced”中。在App组件中，我可以直接调用Enhanced组件吗？

我希望输出应该是按钮元素，但我收到“不变违规”错误

标签： reactjsjsx

Answer 1

您正在传递 FancyButton 的渲染结果，而您应该传递实际的组件函数见下文：

...
const App = props => {
//I am calling the HOC to get my updated component
  let Enhanced = withStyles(FancyButton);

  return (
      <Enhanced />
  );
};
...