Javascript 当变量发生更改时响应刷新组件

我用两个道具调用React组件

条形图

，一个

名称

和一个

值

。正如您在下面的代码中所看到的，变量值被设置为每秒一个新的随机数：

    let random1;

    function setRandom() {
        random1 = Math.floor(Math.random() * 10) + 1;
    }

    setRandom();
    setInterval(setRandom, 1000);

    return (
    <div className="Content">
        <BarChart name1={"A"} value1={random1}/>
    </div>
  )
}

我真正想做的是，每当在组件外部生成一个新的随机值时，组件应该看到变量已更改，并刷新组件并使用新的道具

---

您能告诉我吗？

执行此操作的标准方法是将

random1

制作成一块，然后使用它进行更新

有一个滴答作响的时钟示例，它实际上与您的每秒随机数示例相同。下面是一个例子，您可以很容易地适应您的任务：

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

构造函数（道具）{
超级（道具）；
//在状态中初始化随机数
this.state={random:Math.floor（Math.random（）*10）+1}；
}
//生成随机数并保持状态
setRandom（）{
this.setState（{random:Math.floor（Math.random（）*10）+1}）
}
//卸载组件时清除计时器
组件将卸载（）{
clearInterval（这个计时器）；
}
componentDidMount（）{
//安装组件时启动计时器
this.timer=setInterval（（）=>this.setRandom（），1000）；
}
//将状态中的随机值作为道具传递到组件条形图
返回(
)
}

我不知道如何使这一点适合我自己problem@ReactProblemo - 1. 将上面的

newdate（）

替换为随机数表达式（

Math.floor（Math.random（）*10）+11）。2.搜索并将

date`替换为

random1

。3.稍微更新

render

以显示您的数字，而不是格式化日期。您的意思是value1而不是random1，对吗？由于道具名称是value1No，我的意思是

random1

。你用来填充道具的东西。

setRandom() {
    console.log(this.props.value1)
}

componentDidMount() {
    this.setRandom();
    setInterval(this.setRandom, 1000);
}

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

constructor(props) {
  super(props);
//innitialize the random number in the state
  this.state = {random: Math.floor(Math.random() * 10) + 1};
}
//generate the random number and keep in on the state
  setRandom() {
    this.setState({random: Math.floor(Math.random() * 10) + 1})

  }
//clear the timer when component unmount
componentWillUnmount() {
  clearInterval(this.timer);
}
componentDidMount() {
//start the timer when component mount
  this.timer = setInterval(()=>this.setRandom(), 1000);
}
//pass the random value from state as props to the component BarChart
  return (
  <div className="Content">
      <BarChart name1={"A"} value1={this.state.random}/>
  </div>
)
}