react js importing multiple component from a single jsx file

I am trying to import multiple component which is in one single jsx file in the main js file

This question has been already answered but without example here How to import and export components using React + ES6 + webpack?

My code is as below

App3.jsx file

import React from '../node_modules/react';


export default class App2 extends React.Component {
   render() {
       var i = 1;

       var myStyle = {
         fontSize: 25,
         color: '#FF0000'
       }

      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
            <h1>{1+1}</h1>
            <h1>{i = 1 ? 'True!' : 'False'}</h1>
            <h1 style = {myStyle}>Header</h1>
            { /*gsadjshds */ }
         </div>
      );
   }
}




export default class App3 extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

export default class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

export default class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

And main.js file as below

import React from './node_modules/react';
import ReactDOM from './node_modules/react-dom';
import App  from './js/App.jsx';
import App1  from './js/App1.jsx';
import {App2, App3}  from './js/App3.jsx';


ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<App1 />, document.getElementById('app1'));
ReactDOM.render(<App2 />, document.getElementById('app2'));
ReactDOM.render(<App3 />, document.getElementById('app3'));

But i am getting below errors

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Your help will be appreciated

---

May because you are using multiple export default in a single file. React treats export default like the main class/function of the file and will conflict with other main s upon export. Your code should probably be

import React from '../node_modules/react';


class App2 extends React.Component {
render() {
   var i = 1;

   var myStyle = {
     fontSize: 25,
     color: '#FF0000'
   }

  return (
     <div>
        <h1>Header</h1>
        <h2>Content</h2>
        <p data-myattribute = "somevalue">This is the content!!!</p>
        <h1>{1+1}</h1>
        <h1>{i = 1 ? 'True!' : 'False'}</h1>
        <h1 style = {myStyle}>Header</h1>
        { /*gsadjshds */ }
     </div>
  );
  }
}




class App3 extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

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

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export { App2, App3 };

reference: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

链接地址: http://www.djcxy.com/p/52180.html

上一篇: 动态地在React组件上设置道具

下一篇: 反应js从单个jsx文件导入多个组件