数字之间的Reactjs css空白

Question

我是 Reactjs 的初学者并尝试学习和改进，这里我的代码在 test h1 > 的位置，在此代码下应该出现像这样 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

你的渲染函数应该是纯的，见https://reactjs.org/docs/react-component.html#render:

render() 函数应该是纯函数，即不修改组件状态，每次调用都返回相同的结果，不直接与浏览器交互。

您的渲染函数包含对this.button 的调用。因此，每次您的组件重新渲染时，都会发出一个 fetch 请求，而这似乎只应该被调用一次。正如文档建议的那样，将此逻辑移至componentDidMount。

---

现在，谈谈您的实际问题。你打电话给document.write，看来你不明白这是怎么回事。 Document.write 将从页面中删除所有事件侦听器，并用您提供的参数替换 body 中的所有内容。假设您有一个 ID 为 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，即使你这样做是为了测试或者你正在尝试实现某种页面重新加载/ turbolinks 功能——还有更好的选择。