Question

你能告诉我为什么这个高阶组件无效。我正在尝试使用HOC显示按钮和标签。这是我的代码

var D = (comp) => class extends React.Component{
  render (){
    return (<comp/>)
  }
}

class A extends React.Component {
  render(){
    return (
      <button>hrllo</button>
    )
  }
}
class B extends React.Component {
  render(){
    return (
      <label> hello</label>
    )
  }
}

const PP =D(B)
const PPP =D(A)

class C extends React.Component {
  render(){
    return (
      <div>
         <PP></PP>
          <PPP></PPP>
      </div>

    )
  }
}

ReactDOM.render(<C/>,document.getElementById('root'))

Answer 1

React组件必须以大写字母开头，您可以在docs中阅读。

大写类型表示JSX标记指的是React 零件。这些标签被编译成直接引用命名变量，所以如果你使用JSX表达式，Foo必须是在范围内。

var D = (comp) => class extends React.Component{
  render (){
    return (<comp/>)
  }
}

应该是

var D = (Comp) => class extends React.Component{
  render (){
    return (<Comp/>)
  }
}

codepen

为什么高阶组件不起作用？

1 个答案: