在 ReactJs 中,如何使用扩展创建子组件

IT技术 javascript reactjs
2021-05-23 19:27:09

在下面的代码片段中,我使用扩展来创建组件。这是行不通的。但是如果我使用 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;

此代码不起作用。任何帮助都会很棒

4个回答
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>
        );
    }
}

我得到了我发布的问题的解决方案

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

创建一个类并分配给 ca 变量工作

多谢你们

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>
    );
  }
}

将 AuditTable.Header 更改为 AuditTableHeader,您的代码应按预期工作。

React.Component 不是您扩展的类的名称。有一个名为 React 的对象,它有一个名为 Component 的键,它是您扩展的类。