高次コンポーネントが反応していないのはなぜですか？

Question

をこの高次成分が.IはHOC .Hereを使用して、ボタンやラベルを表示しようとしています動作していないなぜあなたは私を教えてください可能性が私のコード

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

コンポーネントに反応された大文字で開始する必要があります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