Reactjs CSS数字之间的空白

Question

Im beginner on Reactjs and trying to learn and improve, here i have code where is < h1 >test< / h1 > and under this should appear numbers under each other like this 1:1 1:2 1:3, but css does not seem to work with it, i get numbers but without css and i dont get any error message either... is here something wrong ? the code :

 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

Your render function should be pure , see 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.

Your render function contains a call to this.button . So every time your component re-renders, a fetch request is made when it seems this should only be called once. As the docs suggest, move this logic into componentDidMount .

---

Now, onto your actual problem. You are calling document.write , and it seems you don't understand how this works. Document.write will remove all event listeners from the page and replace all content within body with the argument you supplied. Assuming you had a root element with an ID of root ( <div id="root">...</div> ), that will have been removed after your call to document.write ; so your CSS #root selector will no longer point to an existing element.

Instead of using document.write , set the content on your component's state and render that:

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>
    );
  }
}

If you're using React, you should have no reason to call document.write , even if you're doing it for testing or you're trying to implement some sort of page reload / turbolinks feature–there are much better alternatives.