反应js从单个jsx文件导入多个组件答案

【问题标题】：react js importing multiple component from a single jsx file反应js从单个jsx文件导入多个组件
【发布时间】：2016-10-12 22:17:40
【问题描述】：

我正在尝试在主 js 文件的一个 jsx 文件中导入多个组件

这个问题已经回答了，但这里没有例子How to import and export components using React + ES6 + webpack?

我的代码如下

App3.jsx 文件

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

和main.js文件如下

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

但我遇到了错误

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

您的帮助将不胜感激

【问题讨论】：

Offtopic: <h1>{i = 1 ? 'True!' : 'False'}</h1> 这可能是错误的，除非你真的想将1 分配给i。 `
这可能与您拥有多个export default 的事实有关。尝试对所有组件使用常规导出。
成功了我对所有组件都使用了常规导出，现在代码可以正常工作了非常感谢 Gilad。很抱歉我的回复晚了，我不得不出去完成一些工作。

标签： javascript reactjs

【解决方案1】：

可能是因为您在单个文件中使用了多个 export default。 React 将export default 视为文件的main 类/函数，并且在导出时会与其他mains 冲突。你的代码应该是

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

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

【讨论】：

【解决方案2】：

语法：

import component_exported_as_default, {component_1, component_n} from './path/filename'

基本上你需要在花括号{}内导入默认不导出的组件。例如考虑下面的代码（我已经考虑过功能组件，但基于类的组件的导入策略也是相同的）。

components/my_component.js

import React from 'react'

export default function component_exported_as_default(){
    return <p>Exported by default</p>
}

export function component_1(){
    return <p>Component_1</p>
}

export function component_2(){
    return <p>Component_2</p>
}

App.js

import component_exported_as_default, {component_1,component2} from 'components/my_component.js'
function App(){
   return(
      <div className="APP">
         <component_exported_as_default>
         <component_1>
         <component2>
      </div>
   )
}

希望这会有所帮助。 ;)

【讨论】：