我当时正在练习React-Routing，我想将另一个文件中的常量与App.js分开。基本上，这些常量是我想在单独环境中进行编辑的页面的内容。但是，将它们导入App.js后，会出现错误“使用JSX react / react-in-jsx-时，'React'必须在范围内”。这是我的App.js代码：
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {Home,About} from "./Constants.js";
class App extends React.Component {
render() {
return (
<Router>
<div>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
</div>
</Router>
);
}
}
export default App;
和Constants.js中的常量：
const Home = (
<div>
<h2>Home</h2>
</div>
);
const About = (
<div>
<h2>About</h2>
</div>
);
export { Home, About };
JSX被编译成React.createElementcalls，因此，如果您使用的是JSX，则需要导入React。
您还应该将无状态功能组件编写为函数，而不是直接编写为React元素。
import React from 'react';
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
export { Home, About };
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句