爲什麼高階元件沒有反應？

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

反應的組分必須以大寫字母開頭因爲您可以在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