javascript - 为什么我不能从 Reactjs 中的另一个文件导入常量？

Question

我正在练习 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 };

Answer 1

JSX gets compiled into React.createElement calls ，所以如果你使用 JSX，你需要导入 React。

您还应该将无状态功能组件编写为函数，而不是直接作为 React 元素。

import React from 'react';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export { Home, About };