在ReactJs中，如何使用擴展創建子組件

Question

在下面的代碼片段中，我使用了擴展來創建組件。這不起作用。但是如果我使用React.createClass（{}）;它工作正常。您可以讓我知道什麼問題是在下面的代碼片段

import React from 'react'; 

class App extends React.Component { 
render() { 
    return (
    <div> 
     <AuditTable/> 
    </div> 
); 
} 
} 

class AuditTable extends React.Component { 
render(){ 
    return(
     <div> This is audit table 
      <AuditTable.Header/> 
     </div> 
    ); 
} 
} 

class AuditTable.Header extends React.Component{ 
render(){ 
    return(
     <div> 
      Audit Table Header 
     </div> 
    ); 
} 
} 

export default App; 

此代碼不起作用。任何幫助將是偉大的

Answer 1

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      <AuditTable/> 
     </div> 
    ); 
    } 
} 


var AuditTable = class AuditTable extends React.Component { 
    render(){ 
     return(
      <div> 
       <AuditTable.Header/> 
       <AuditTable.Row/> 
      </div> 
     ); 
    } 
} 

AuditTable.Header = class Header extends React.Component{ 
    render(){ 
     return(
      <div> 
       Audit Table Header 
      </div> 
     ); 
    } 
} 

Answer 2

將auditTable.Header更改爲AuditTableHeader，您的代碼應該按預期工作。

React.Component不是您擴展的類的名稱。有一個名爲React的對象，它有一個名爲Component的鍵，它是您擴展的類。

Answer 3

AuditTable.Header不是有效的類名（因爲它包含一個點）。如果你想你的子組件導出爲您的組件的靜態屬性，你有兩種可能性：

1 /聲明一個Header組件，然後直接分配它AuditTable.Header

const Header extends React.Component{ 
    render(){ 
    return(
     <div> 
     Audit Table Header 
     </div> 
    ); 
    } 
} 

AuditTable.Header = header; 

2 /聲明Header爲的AuditTable

class AuditTable extends React.Component { 

    static Header = class extends React.Component{ 
    render(){ 
     return(
     <div> 
      Audit Table Header 
     </div> 
    ); 
    } 
    } 

    render(){ 
    return(
     <div> This is audit table 
     <AuditTable.Header/> 
     </div> 
    ); 
    } 
} 

Answer 4

靜態屬性，我得到了解決我張貼

問題

var AuditTable = class AuditTable extends React.Component { ... } 
AuditTable.Header = class Header extends React.Component { ... } 
AuditTable.Row = class Row extends React.Component { ... } 

創建一個類和分配到CA變量工作

謝謝你們