Reactjs css пробел между числами

Question

Я новичок в Reactjs и пытаюсь учиться и совершенствоваться, здесь у меня есть код, где находится

test

, и под этим должны появляться цифры друг под другом, как это 1: 1 1: 2 1: 3, но Кажется, что css не работает с ним, я получаю числа, но без css, и я тоже не получаю сообщение об ошибке ... здесь что-то не так? код:

import React, { Component } from 'react'

class Button extends Component {

    state = {}



    button = () => {

        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = "http://*****.*****.com/numbers.txt"; 
        fetch(proxyurl + url) 
            .then(response => response.text())
            .then(contents => document.write(contents))

    }


    render() {
        return (
            <div >
                <h1>test</h1>
                <div style={{ color: 'red' }}>{this.button()}
                </div>
            </div >
        );
    }
}

export default Button;

css:

body {
  background: url('***.png');
  color:red;
  margin:50px 0; 
   padding:0px;
   text-align:center;

  
}

  #root {
    white-space: pre;
  }
  

Answer 1

Ваша функция рендеринга должна быть pure , см. https://reactjs.org/docs/react-component.html#render:

Функция render() должна быть чистой, то есть она не изменяет состояние компонента, возвращает один и тот же результат при каждом вызове и напрямую не взаимодействует с браузером.

Ваша функция рендеринга содержит вызов this.button. Таким образом, каждый раз, когда ваш компонент повторно рендерится, делается запрос на выборку, когда кажется, что его следует вызывать только один раз. Как показывают документы, перенесите эту логику в componentDidMount.

---

Теперь перейдем к вашей актуальной проблеме. Вы звоните document.write , и кажется, что вы не понимаете, как это работает. Document.write удалит все прослушиватели событий со страницы, а заменит весь контент в body указанным вами аргументом. Предполагая, что у вас есть корневой элемент с идентификатором root (<div id="root">...</div>), он будет удален после вашего звонка на document.write; поэтому ваш селектор CSS #root больше не будет указывать на существующий элемент.

Вместо использования document.write установите содержимое для состояния вашего компонента и отобразите это:

import React, { Component } from "react";

export default class Button extends Component {
  state = {
    contents: null
  };

  componentDidMount() {
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url = "http://*****.*****.com/numbers.txt";
    fetch(proxyurl + url)
      .then(response => response.text())
      .then(contents => this.setState({ contents }));
  }

  render() {
    return (
      <div>
        <h1>test</h1>
        <div style={{ whiteSpace: "pre" }}>{this.state.contents}</div>
      </div>
    );
  }
}

Если вы используете React, у вас не должно быть никаких причин для вызова document.write, даже если вы делаете это для тестирования или пытаетесь реализовать какую-то перезагрузку страницы / турболинки особенность - есть намного лучшие альтернативы.