钩如何可以更新传递给组件的道具

Question

i有一个要通过的组件，我需要在更改道具的值时要更新组件。

我已经尝试使用使用效果挂钩观看props and prop.propiwanttochange，但是我无法在渲染后将更新传递给该组件。

app.js

let tracker = true;
const handleChangeTracker = () => {
  tracker = !tracker
}
const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}

component1.js

const Component1 = props => {
  useEffect(() => {
    console.log(props.active)
  }, [props.active])
  return (  
    <div>{props.active && "You see this when its true"}</div>  
  )
}

单击按钮时，我希望跟踪器的价值在True和False之间切换。然后，我希望它将新值传递给component1。当前，它将更改值(我通过控制台日志跟踪(，但不会将新值传递给组件。

Answer 1

该值不会传递给子组件，因为您的'跟踪器'变量未存储在状态中。状态价值的变化会触发新的渲染，而不是变量的变化。

因此，当" handlechangetracker"中更新'Tracker'时，它不会触发新的渲染，因此新值未传递给儿童组件，因此没有新的渲染。

解决方案是将"跟踪器"保存在状态中，然后在" HandlechangeTracker"中更新状态。

this.state = { tracker = true; }
const handleChangeTracker = () => {
  this.setState({
            tracker: !tracker
        })
}
const App = props => {
  <React.Fragment>
    <button onClick={handleChangeTracker} >Change</button>
    <Component1 active={this.state.tracker} />
    <Component2 />
    <Component3 />
    <Component4 />
  </React.Fragment>
}