В приведенном ниже фрагменте я использую extends для создания компонентов. который не работает. Но если я использую 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;

Этот код не работает. Любая помощь будет отличной

1
anandharshan 10 Янв 2017 в 22:20

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>
        );
    }
}
5
KAEH 10 Янв 2017 в 19:59

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>
    );
  }
}
1
Freez 10 Янв 2017 в 19:42

Я получил решение вопроса, который я разместил

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

Создание класса и присвоение переменной ca работало

Спасибо, парни

2
anandharshan 10 Янв 2017 в 19:56

Измените AuditTable.Header на AuditTableHeader, и ваш код должен работать как задумано.

React.Component - это не имя класса, который вы расширяете. Есть объект с именем React, у которого есть ключ с именем Component, который является классом, который вы расширяете.

0
mr.rogers 10 Янв 2017 в 19:31