时间戳

首页 > 解决方案 > 如何通过单击组件外部的按钮来刷新 React 组件？

javascript - 如何通过单击组件外部的按钮来刷新 React 组件？

问题描述

我是 Web 开发的新手，并决定学习 ReactJs。我正在尝试创建一个随机报价生成器作为 freecodecamp 前端库项目的一部分。问题：我有一个反应组件，它从网站获取报价，然后在屏幕上显示一个随机报价。我在组件之外还有一个按钮，其唯一目的是获取新代码并将其显示在屏幕上。每当我单击按钮时如何刷新反应组件？任何帮助表示赞赏！：D 这是我的组件：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: ''
    };
  }

  componentDidMount() {
    fetch("https://type.fit/api/quotes")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            quote: result[Math.floor(Math.random() * result.length)]
          });
        },
      )
  }


  render() {
    return ( 
      <p id = 'reactQuote'>{this.state.quote.text}< /p>
    );
  }
}

ReactDOM.render( MyComponent />, document.getElementById('text'))
<div id="text"></div>
<button id='new-quote'>New Quote</button>

标签： javascriptreactjs

解决方案

创建一个包含按钮和组件的组件，将引用作为上层组件中的状态并将其作为道具传递给您的组件，现在当您按下按钮时，它将更改上层组件中的状态并且它将被传递给你的组件，强制它刷新并显示新的报价。

推荐阅读