Question

我正在尝试在React中创建一个Word Clock ...然而，尽管我发送了一个新的道具，但我的子组件并没有重新渲染。为了显示正确的时间我需要刷新页面... 我读到了组件生命周期，我认为我做得对，但似乎没有。我的猜测是，当我在父组件中渲染时，这只渲染一次并且不会重新渲染，即使我每秒都在不断更新setState（）的状态并更新时间...... 这是代码：不工作的demo，只是app.js文件我正在使用Facebook的Create-react-app

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

https://jsfiddle.net/dLtedtm0/

Answer 1

如果您可以在代码中提供一些文档来解释代码应该做什么，那将会有所帮助。

那就是说，这里有一些提示让你朝着正确的方向前进：

在<Text>中，您有一个componentWillReceiveProps(nextProps)函数，该函数调用highlight()。 highlight函数根据props更改状态。但是：此时道具仍然具有旧值（因为您在componentWillReceiveProps()内。要解决，您可以通过nextProps突出显示。但是，我建议删除完全来自Text组件的状态。
您的<Text>组件具有状态，但它不需要它：组件的所有不同变体都由props确定。因此，将逻辑转换为渲染函数内渲染的内容会更简单。然后，文本组件中唯一的生命周期方法是render()。状态实际上是用于组件本身在组件生命周期中更改的值（例如，文本字段中的用户输入）。
在您的时钟中，在获取getInitialState()时，您只返回showValue。在代码的后面部分，您还要包括hours，minutes，seconds。最好在getInitialState()中包含所有内容并具有一些初始值，因此您的代码读者将知道您在此组件的状态下管理的内容。

希望这会帮助你朝着正确的方向前进。

更新：作为起点，您可以找到简化的working codepen here，只包含时钟组件。它有状态（当前时间），只需每秒渲染一次。希望你可以从那里开始添加代码。

Child React Component不会重新渲染

1 个答案: