React - 从 App 重新加载外部组件

Question

我对 React 还是个新手。

我在做猜谜游戏。在页面加载时，一切都正确加载（至少在 Chrome 和 Safari 上）。猫按钮被分配了一个随机数，当被点击时，它们将相应的值发送到游戏逻辑。当达到或超过目标数量时，目标数量将重置。

这就是我想要的，但我还希望按钮获得新值。我希望按钮组件重新加载并为按钮分配新值。我尝试使用此处的更新方法：https://reactjs.org/docs/react-component.html#updating。我不知道下一步该怎么做。

App.js

import React, { Component } from 'react';
import './App.css';
import Buttons from "./components/Buttons/Buttons";

class App extends Component {

  targetNumber = (min, max) => {
    const targetNum = Math.floor(Math.random()*(max-min+1)+min);
    console.log(`Target number = ${targetNum}`);

    return targetNum
  };

  state = {
    targetNumber: this.targetNumber(19, 120),
    currentValue: 0,
    gamesWon: 0,
  };

  handleClick = (event) => {
      event.preventDefault();
      const currentValue = this.state.currentValue;
      const newValue = parseInt(event.target.getAttribute("value"));
        this.setState(
            {currentValue: currentValue + newValue}
        )
        // console.log(newValue);
    }

  componentDidUpdate() {
    if (this.state.currentValue === this.state.targetNumber) {
      this.setState(
          {
            targetNumber: this.targetNumber(19, 120),
            currentValue: 0,
            gamesWon: this.state.gamesWon + 1
          }
      )
    }
    else {
        if (this.state.currentValue >= this.state.targetNumber) {
            this.setState(
                {
                  targetNumber: this.targetNumber(19, 120),
                  currentValue: 0,
                  gamesWon: this.state.gamesWon,
                }
            );
        }
    }
  }

  render() {
    return (

      <div className="App">

        <img src={require("./images/frame.png")} alt="frame" id="instructFrame" />

        <div className="resultsDiv">

          <div className="targetNumber">
            Target number = {this.state.targetNumber}
          </div>

          <div className="currentValue">
              Current value = {this.state.currentValue}
          </div>

          <div className="gamesWon">
              Games won = {this.state.gamesWon}
          </div>

        </div>

        <div className="buttonGrid">
            <Buttons 
              onClick={this.handleClick} 
            />
        </div>

      </div>
    );
  }
}

export default App;

Buttons.js

import React, { Component } from "react";
import Button from "../Button/Button";
import black from "../Button/images/black_cat.png";
import brown from "../Button/images/brown_cat.png";
import gray from "../Button/images/gray_cat.png";
import yellow from "../Button/images/yellow_cat.png";


class Buttons extends Component {

    generateNumber = (min, max) => {
        const rndNumBtn = Math.floor(Math.random()*(max-min+1)+min);
        console.log(rndNumBtn);
        return rndNumBtn
      };

     state = {
        buttons: [
            {
                id: "black",
                src: black,
                alt: "blackBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "brown",
                src: brown,
                alt: "brownBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "gray",
                src: gray,
                alt: "grayBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "yellow",
                src: yellow,
                alt: "yellowBtn",
                value: this.generateNumber(1, 12)
            }
        ]
    };

    render() {
        return (
            <div>

                {this.state.buttons.map(button => {
                    return (
                        <Button
                          className={button.id}
                          key={button.id}
                          src={button.src}
                          alt={button.alt}
                          value={button.value}
                          onClick={this.props.onClick.bind(this)}
                        />
                    )
                })}

            </div>
        )
    }
}

export default Buttons;

这是 GitHub 代码库。 https://github.com/irene-rojas/numberguess-react

Answer 1

您可以将 key 添加到链接到变量 targetNumber 的 Button 组件。这样，只要 targetNumber 发生变化，React 就会重新渲染 Button。

<div className="buttonGrid">
   <Buttons 
     key={this.state.targetNumber}         
     onClick={this.handleClick} 
   />
</div>

React - 从 App 重新加载外部组件

React - reload external component from App

javascript

reload

reactjs

react-component