你如何用 React 更新 div？

Question

在我的 class 中，我们已经开始学习如何使用 React，但我在其中一个入门项目中遇到了一些麻烦。我只需要按下一个按钮，该数字就会出现在页面上，这是一个非常基本的骰子模拟。我可以在控制台中执行此操作，但我不知道如何将变量推送到页面上。

App.js的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Diceroll';
import Diceroll from './Diceroll';

class App extends Component {
render() {
    return (
        <div>
             <Diceroll />

        </div>
    );
  }
}

export default App;

还有我的Diceroll.js：

import React, { Component } from 'react';

class Diceroll extends Component {

render() {
    return (
        <div>
        <button onClick={() => {this.dieroll()}}>Roll the 120 Die</button>


      </div>
    )
  }

dieroll() {
    var roll = Math.floor(Math.random() * 121);

    console.log(roll);
 }
}

export default Diceroll;

是的，掷骰子应该是从 1 到 120。我们查了面数最多的骰子，第一个结果是 120 面的骰子。

Answer 1

更新 Diceroll.js 代码下方的代码。

import React, { Component } from "react";

class Diceroll extends Component {
  state = {
    roll: 0
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.dieroll();
          }}
        >
          Roll the 120 Die
        </button>
        <br />
        <br />
        {this.state.roll}
      </div>
    );
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({ roll: roll });
    console.log(roll);
  }
}

export default Diceroll;

您可以使用 state，使用 setState 您可以更新并显示更新后的 roll 号码。 click here to learn more about state

class Diceroll extends React.Component {

  state = {
    roll: 0
  }

  render() {
    return ( <
      div >
      <
      button onClick = {
        () => {
          this.dieroll()
        }
      } > Roll the 120 Die < /button> <
      br / > < br / > {
        this.state.roll
      } <
      /div>
    )
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({
      roll: roll
    });
    console.log(roll);
  }
}

class App extends React.Component {
  render() {
    return ( <
      div >
      <
      Diceroll / >

      <
      /div>
    );
  }
}

ReactDOM.render( <
  App / > ,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

你如何用 React 更新 div？

How do you update the div with React?

javascript

random

math

var

reactjs