Question

因此，我有一个上级组件来设置计分计数器，并将其传递给下级组件。我在父组件DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); factory.setNamespaceAware(false);中有一个函数，需要使用该函数将计数器重置为0。当前此代码无法在按下按钮时更新分数状态。完整结果显示当前静止图像，而不是重置为0。

resetBoard()

Answer 1

父组件

resetBoard = () => {
 this.setState({counter: 0});
}

将此功能传递给子组件。

<ChildComponent onClick={this.resetBoard }/>

现在“子级”组件中的按钮上可以使用它。

<button  onClick={props.onClick} />

或

<button  onClick={this.props.onClick} />

Answer 2

得分状态应全部存储/更新在一个地方，而不是让父母和孩子都有自己的状态。如果将它们全部存储在App的状态中，并将updateScoreFive也移到App中，则可以将分数和对该函数的引用向下传递到Player中，可以将其转换为无状态功能组件：

import React from 'react';

export default function Player = (props) => {
  if (props.score >= 150) {
    console.log('winner');
  }
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.score}</p>
      <button onClick={props.updateScoreFive}>5</button>
    </div>
  )
}

在App中：

<Player updateScoreFive={this.updateScoreFive} ... />

这是一篇有关如何考虑应将状态存储在何处的好文章：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

作为道具传递时，如何将状态从父组件更新为子组件？

2 个答案: