![](/img/trans.png)
[英]Importing React Autosuggest as Functional Component from Another JSX File
[英]react js importing multiple component from a single jsx file
我正在尝试导入位于主 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
。 React 将export default
视为文件的main
类/函数,并且在导出时会与其他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
语法:
import component_exported_as_default, {component_1, component_n} from './path/filename'
基本上,您需要在大括号{} 中导入默认情况下未导出的组件。 例如考虑下面的代码(我已经考虑了功能组件,但基于类的组件的导入策略也是相同的)。
组件/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>
}
应用程序.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>
)
}
希望这会有所帮助。 ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.