React项目中如何在About.js内引入并调用PostList.js导出的组件

实现步骤 #

• 第一步：检查依赖完整性
  PostList组件中使用了axios发起网络请求，首先要保证合并后的项目已经安装该依赖，未安装的话在项目根目录执行命令：

  npm install axios
  

• 第二步：在About.js中导入PostList组件
  首先确认两个文件的相对路径，假设POSTLIST.js和ABOUT.js存放在同一级目录下，在About.js的导入区域新增导入语句：

  import PostList from './POSTLIST'
  

  注意：路径需要根据你实际的文件存放位置调整，文件名大小写要和实际文件保持一致
• 第三步：在About组件的render方法中使用PostList组件
  你可以把PostList组件放在你需要渲染的位置，比如示例中替换掉<h1>TODO : DATERANGE</h1>的位置即可。

修改完成后的About.js完整代码示例 #

import React, { Component } from "react";
import { Link } from "react-router-dom";
import PostList from './POSTLIST' // 新增的导入语句
class About extends Component {
  render() {
    return (
      <div>
        {/* <!-- banner --> */}
        <section className="inner-page-banner" id="home"></section>
        {/* <!-- //banner -->
    <!-- page details --> */}
        <div className="breadcrumb-agile">
          <ol className="breadcrumb mb-0">
            <li className="breadcrumb-item">
              <Link to="/">Home</Link>
            </li>
            <li className="breadcrumb-item active" aria-current="page">
              About Us
            </li>
          </ol>
        </div>
        {/* <!-- //page details -->
        <!--about-mid --> */}
        <section className="banner-bottom py-5" id="exp">
          <div className="container py-md-5">
            <h3 className="heading text-center mb-3 mb-sm-5">About More</h3>
            <div className="row mid-grids mt-lg-5 mt-3">
              <div className="col-md-5 content-w3pvt-img">
                <img src="assets/image/ban1.jpg" alt="" className="img-fluid" />
              </div>
              <PostList /> {/* 这里替换原来的TODO内容 */}
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default About;

注意事项 #

• 如果axios请求出现跨域报错，需要在你的后端接口服务配置跨域响应头，或者在React项目中配置代理转发
• 如果两个文件不在同一目录，需要调整导入的相对路径，比如PostList存放在components目录下，就写import PostList from './components/POSTLIST'
• React中给DOM元素指定样式类要使用className属性而非原生的class，避免运行时警告，上述示例已经做了对应修改

内容的提问来源于stack exchange，提问作者user17022531