test

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 中的所有内容。假设您有一个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功能–还有更好的选择。

Reactjs CSS数字之间的空白

test

1 个答案: