在ReactJs中，如何使用extends创建子组件 [英] In ReactJs, How do I create subcomponent using extends

问题描述

在下面的代码片段中，我使用extends来创建组件。这是行不通的。但是如果我使用React.createClass（{}）;它工作正常。你可以告诉我下面代码片段中的问题是什么

In the below snippet, I am using extends to create components. which is not working. But If I use React.createClass({}); It works fine. Could you please let me know what the problem is in below code snippet

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;

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

This code does not work. Any help would be great

推荐答案

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

这篇关于在ReactJs中，如何使用extends创建子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！