Question

我有一个导入的组件，但未显示在页面上。

这是我的app.js文件。我导入了<player/>组件，但无法在浏览器中正确显示。

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { player } from "./player";

class App extends Component {
render() {
return (
  <div className="App">
    <div>
      <player />
    </div>
  </div>
  );
}
}

export default App;

这是player.js的内容

 import React from "react";
 import { Button } from "evergreen-ui";

 export default class player extends React.Component {
 constructor(...args) {
 super(...args);
 this.state = {
  shoot: 0
 };
 }
shoot() {
this.setState.shoot = Math.floor(Math.random() * Math.floor(3));
}
render() {
return (
  <div>
    <h1>hello there</h1>
    <h1>{this.state.shoot}</h1>
    <Button onClick={() => this.shoot}>Shoot another 
    value</Button>
  </div>
);
}
}

Answer 1

在您的代码中，您已将播放器组件导出为默认导出

export default class player extemds React.Component

但是在其他文件中导入时，您将其作为命名导出导入

import { player } from "./player";

尝试将其导入时不使用花括号，就像使用默认导出一样

 import player from "./player";

Answer 2

您犯了两个错误：
1.以错误的方式导入组件
2.以错误的方式渲染组件

解决方案

导入的组件应不带花括号
react组件“玩家”应该以大写字母开头，即应重命名为玩家

以下是我在本地计算机上尝试过的工作代码。它只会修改App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player"; // imported without curly braces and with capital first letter

class App extends Component {
  render() {
    return (
      <div className="App">
        <div>
          <Player /> {/* Rendering the correct way */}
        </div>
      </div>
    );
  }
}

export default App;

边注

在player.js中，您以错误的方式设置状态，由于以下原因，该状态无效：

setState是一种方法，而不是对象
this未与方法shoot绑定。它将引发类似“无法读取未定义的内容”之类的错误

如下修改您的player.js：

import React from "react";
import { Button } from "evergreen-ui";

export default class player extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      shoot: 0
    };
  }
  shoot = ()=>{
    this.setState({
      shoot: Math.floor(Math.random() * Math.floor(3)),
    });
  } 

  render() {
    return (
      <div>
        <h1>hello there</h1>
        <h1>{this.state.shoot}</h1>
        <Button onClick={() => this.shoot()}>Shoot another
    value</Button>
      </div>
    );
  }
}

Answer 3

您有两个主要问题：

1）您默认导出，然后导入错误。

如果您导出为：

export default class player extemds React.Component

然后您需要导入为：

import player from "./player";

2）组件必须以大写字母开头，否则React认为它们是简单的HTML标记，而不是组件。因此，您必须在所有地方将player更改为Player

不显示导入的组件

3 个答案: