импортированный компонент не отображается

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

Вы делаете две ошибки:
1. Неправильный импорт компонента.
2. Неправильная визуализация компонента

Решение

1. Компонент должен быть импортирован без фигурных скобок
2. Реактивный компонент "игрок" должен начинаться с заглавных букв, т.е. он должен быть переименован в "Игрок"

Ниже приведен рабочий код, который я пробовал на моей локальной машине. Изменяет только 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;

Sidenote

В player.js вы устанавливаете состояние неправильно, оно не будет работать, потому что:

1. setState - это метод, а не объект
2. 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 2

У вас есть две основные проблемы:

1) Вы экспортируете по умолчанию, а затем ваш импорт неверен.

Если вы экспортируете как:

export default class player extemds React.Component

Тогда вам нужно импортировать как:

import player from "./player";

2) Компоненты должны начинаться с прописной буквы, в противном случае React считает, что это простые HTML-теги, а не компоненты. Таким образом, вы должны изменить player на Player везде

Answer 3

В своем коде вы экспортировали компонент проигрывателя как экспорт по умолчанию

export default class player extemds React.Component

Но при импорте его в другой файл вы импортируете его как именованный экспорт

import { player } from "./player";

Попробуйте импортировать его без фигурных скобок, как при экспорте по умолчанию

 import player from "./player";