Question

我花了最后几个小时看看如何渲染这个但我无法理解它。

const Test = props => (
  <p>
    {console.log(props)}
    {props.children}
  </p>
)

const changeColor = WrappedComponent => props => {
  return class extends React.Component {
    render() {
      return (
        <WrappedComponent style={{ color: props.color }} test="adasd">
          {props.children}
        </WrappedComponent>
      )
    }
  }
}

const Temp = changeColor(Test)

当我去渲染它时，它告诉我Functions are not valid as a React child.如何返回一个类组件，因为我需要访问状态。

Answer 1

那是因为changeColor是

function that return function that returns class component

要使代码正常工作，您需要：

const props = {};

const Temp = changeColor(Test)(props)

但是，我认为你不需要以道具作为参数的那个功能：

const changeColor = WrappedComponent => {
  return class extends React.Component {
    render() {
      return (
        <WrappedComponent style={{ color: this.props.color }} test="adasd">
          {this.props.children}
        </WrappedComponent>
      )
    }
  }
}

const Temp = changeColor(Test)

Answer 2

您无法呈现console.log(props)。写得像这样：

const Test = (props) => {
    console.log(props);
    return (
        <p>
            {props.children}
        </p>
    );
}

如何将HOC与类Component一起使用

2 个答案: