我试图导入多个组件，它是在一个单一的JSX文件中的主要js文件反应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：类型不能为空，未定义，布尔或数字。它应该是一个字符串（用于DOM元素）或ReactClass（用于复合组件）。

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

您的帮助会因为你是在一个文件中使用多个export default理解五月

来源

2016-06-12 Ganesh G

Offtopic：'

{I = 1？ '真正！' ：'False'}

'这可能是错误的，除非你真的想把'1'分配给'i'。 ' – JensG

这可能与您有多个'export default'的事实有关。尝试对所有组件使用常规导出。 –

它工作我用所有组件的常规出口，现在的代码工作非常感谢你吉拉德。对不起，我迟到了，我不得不出去完成一些工作。 –

。 React对待文件0123//main的export default，并且在导出时将与其他main冲突。您的代码也许应该是

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

来源

2016-11-09 07:36:12 kaushik94

反应JS从一个单一的JSX文件

{I = 1？ '真正！' ：'False'}

回答

相关问题