首页 文章

Child React Component不会重新渲染

提问于
浏览 次
-2

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

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

https://jsfiddle.net/dLtedtm0/

reactjs

1 回答

  • 2

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

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

    • 在 <Text> 中，您有 componentWillReceiveProps(nextProps) 函数，该函数调用 highlight() . highlight 函数根据props改变状态 . 但是：此时道具仍然具有 old 值（因为你在 componentWillReceiveProps() 内 . 要解决，你可以传递 nextProps 来突出显示 . 但是，我建议完全从Text组件中删除状态 .

    • 你的 <Text> 组件有状态，但它不需要它：组件的所有不同变体都由props决定 . 因此，将逻辑转换为渲染函数内渲染的内容会更简单 . 然后，文本组件中唯一的生命周期方法是 render() . 状态实际上是用于组件本身在组件生命周期中更改的值（例如，文本字段中的用户输入） .

    • 在你的时钟中，在 getInitialState() 中你只返回一个 showValue . 稍后在您的代码中，您还包括 hours ， minutes ， seconds 到州 . 最好在 getInitialState() 中包含一些初始值的所有内容，因此您的代码的读者将知道您在此组件的状态下管理的内容 .

    希望这能帮助你朝着正确的方向前进..

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

    回复于

相关问题