Question

所以我有一项任务，要求我仅在一个js / jsx文件中创建一个React应用程序。这个要求对我来说已经非常令人沮丧，我不知道为什么它存在于第一个地方，因为我无法弄清楚这样做的语法。这是我的代码：

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(        
    <div className="centerContent">
            <div className="container">
                <div className="row">
                    <div className="col-6" style={{fontSize: "1vw"}}>
                        <div id="starWarsBanner"></div>
                        <div id="data-col-1">
                            Data loading...
                        </div>
                        <button type="button" onClick="getStarWarsData" className="btn btn-success btn-lg" id="getNewStarWarsData">Get New Star Wars Character</button>
                    </div>
                    <div className="col-6" style={{fontSize: "1vw"}}>
                        <div id="pokemonBanner"></div>
                        <div id="data-col-2">
                            Data loading...
                        </div>
                        <button type="button" onClick="getPokemonData" className="btn btn-success btn-lg" id="getNewPokemonData" style={{marginTop: "10px"}}>Get New Pokemon</button>
                    </div>
                </div>
            </div>
        </div>, document.getElementById('root'));

在“数据加载... html”部分中，我想理想地放置另一个组件来呈现来自这两个API的信息：

https://swapi.co/

https://pokeapi.co/

这实际上是唯一的要求，但我不知道如何仅使用一个文件来执行此操作。请帮忙！

Answer 1

使用多个文件或一个文件没有区别。您只需要导出/导入组件。

import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";

class StarWars extends React.Component {
  // lifecycle methods here
  getStarWarsData = () => {
    //fetch the data here and add it to the state
  };
  render() {
    return (
      <React.Fragment>
        <div id="starWarsBanner" />
        <div id="data-col-1">Data loading...</div>
        <button
          type="button"
          onClick={this.getStarWarsData}
          className="btn btn-success btn-lg"
          id="getNewStarWarsData"
        >
          Get New Star Wars Character
        </button>
      </React.Fragment>
    );
  }
}

class Pokemon extends React.Component {
  // lifecycle methods here
  getPokemonData = () => {
    //fetch the data here and add it to the state
  };
  render() {
    return (
      <React.Fragment>
        <div id="pokemonBanner" />
        <div id="data-col-2">Data loading...</div>
        <button
          type="button"
          onClick={this.getPokemonData}
          className="btn btn-success btn-lg"
          id="getNewPokemonData"
          style={{ marginTop: "10px" }}
        >
          Get New Pokemon
        </button>
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  // lifecycle methods here

  render() {
    return (
      <div className="centerContent">
        <div className="container">
          <div className="row">
            <div className="col-6" style={{ fontSize: "1vw" }}>
              <StarWars />
            </div>
            <div className="col-6" style={{ fontSize: "1vw" }}>
              <Pokemon />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

演示在https://codesandbox.io/s/kx5r0q3rnv

如何在一个文件中创建一个简单的React应用程序？

1 个答案: