如何在另一个 javascript 文件中调用一个 javascript 文件 React js答案

【问题标题】：How to call a javascript file in another javascript file React js如何在另一个 javascript 文件中调用一个 javascript 文件 React js
【发布时间】：2021-11-20 05:04:45
【问题描述】：

我有两个 React 项目，一个是主页，另一个是日期范围。现在我想将两个反应项目合并为一个。我从一个项目复制文件并粘贴到另一个项目中。现在如何在另一个 js 文件中调用那些 js 函数？

POSTLIST.js

import React, { Component } from "react";
import axios from "axios";
class PostList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
    };
  }
  componentDidMount() {
    axios.get("http://127.0.0.1:8000/last15days").then((response) => {
      this.setState({
        posts: response.data,
      });
      console.log(response.data);
    });
  }
  render() {
    const { posts } = this.state;
    return (
      <div>
        <h1>get call in React js</h1>
        {posts.map((post) => (
          <div key={post.id}>{post.id} </div>
        ))}
      </div>
    );
  }
}
export default PostList;

关于.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
class About extends Component {
  render() {
    return (
      <div>
        {/* <!-- banner --> */}
        <section class="inner-page-banner" id="home"></section>
        {/* <!-- //banner -->
    <!-- page details --> */}
        <div class="breadcrumb-agile">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item">
              <Link to="/">Home</Link>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
              About Us
            </li>
          </ol>
        </div>
        {/* <!-- //page details -->
        <!--about-mid --> */}
        <section class="banner-bottom py-5" id="exp">
          <div class="container py-md-5">
            <h3 class="heading text-center mb-3 mb-sm-5">About More</h3>
            <div class="row mid-grids mt-lg-5 mt-3">
              <div class="col-md-5 content-w3pvt-img">
                <img src="assets/image/ban1.jpg" alt="" class="img-fluid" />
              </div>
              <h1>TODO : DATERANGE</h1>
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default About;

现在我想在 About.js 中调用 Postlist.js 如何调用那个函数

【问题讨论】：

在 ABOUT.js 的顶部，您可以从“pathtopostlist”导入 PostList；然后在渲染方法中你可以渲染它：

标签： javascript html reactjs api frontend

【解决方案1】：

好吧，你不叫这些项目。基本上，您希望将 React 的两个组件整合到一个项目中。在您的文件末尾，您正在导出您的组件。这样，您可以将其导入到主组件中并调用该函数。您导出的方式是 default 方式，这意味着导出不是命名，即，您可以按以下语法导入文件：

关于.js

import PostList from './PostList.js';
// use <PostList /> anywhere in your code now
// ...

【讨论】：

Import PostList 很好并且运行良好，但我希望在 TODO 部分调用 PostList 我该怎么做
无论你需要在哪里调用它，只要在你的渲染方法中像<PostList />一样调用它。
你可以这样称呼它<div><h1>TODO : DATERANAGE</h1><PostList /></div>

【解决方案2】：

假设这两个文件位于同一层次结构中。您需要在 ABOUT.js 中导入 POSTLIST.js

import PostList from './POSTLIST'

【讨论】：

/div> <h1>TODO : DATERANGE</h1> // i expect call PostList function Here </div>
@Raghav 如果您已在文件中导入，则在您想调用它的任何位置添加<PostList />。