为什么高阶组件在反应中不起作用？

Question

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

http://codepen.io/anon/pen/ygpVeZ

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.

中阅读

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.

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

应该是

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

codepen