Question

我是一个完整的初学者。我想这是一个非常基本的问题。对不起。我正在研究反应。我想运行App.js来显示它，但是它仍然只显示index.js中的代码。为什么？

Answer 1

您不会在index.js中导入和导出App.js文件，因此不会呈现App.js代码。请找到更新的代码。 https://codesandbox.io/s/2xy029ol60

Answer 2

这是因为您已将两个组件命名为App。要打印为真实的一个，必须将它们导入到新文件中。检查https://codesandbox.io/s/xl0q1jkzyq

//index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import App from "../src/App";
function App1() {
  return (
    <div className="App">
      <h1>Nice</h1>
      <h2>Start editing to see some magic happen!</h2>
      <App />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App1 />, rootElement);

//App.js
import React, { Component } from "react";

export default class App extends Component {
  render() {
    const text = "your smart?";
    const condition = "true";

    return (
      <div>
        <h1>react hi ~</h1>
        <h2>{text}</h2>

        {condition ? "true" : "false"}
      </div>
    );
  }
}

Answer 3

https://codesandbox.io/s/63ok3m8zz

您必须将App导入index.js并将其放入render（）

我想运行App.js来显示它，但是它仍然只显示index.js中的代码

3 个答案: