javascript - Reactjs css数字之间的空白

Question

我是 Reactjs 的初学者，正在努力学习和改进，这里我有代码，其中 < 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 :

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

您的渲染函数包含对 this.button 的调用.因此，每次您的组件重新呈现时，都会发出提取请求，而这似乎只应调用一次。正如文档所建议的那样，将此逻辑移动到 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 功能——还有更好的选择。