子Reactコンポーネントは再レンダリングされません

Question

私はReactでWord Clockを作成しようとしています...しかし、私の子コンポーネントは新しい小道具を送信しても再レンダリングしません。正しい時間が表示されるように、私はページをリフレッシュする必要があります... コンポーネントのライフサイクルについて読んだところ、私はそれを正しくやっていると思っていましたが、そうではないようです。私が推測するのは、親コンポーネントでレンダリングすると、これは一度しかレンダリングされず、毎秒setState（）の状態を常に更新していて、時間を更新しても再描画しないということです。 ここにコードがあります：デモ、私はFacebookの作成反応するアプリ

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

https://jsfiddle.net/dLtedtm0/を使用しているだけでapp.jsファイルを働いていない

Answer 1

あなたが何かを説明するために、あなたのコード内のいくつかのドキュメントを提供することができればそれが役立つだろう

コードがするはずです。言っ

、ここにいくつかのあなたは正しい方向に軌道に乗るためのヒントがあります：あなたの<Text>で

• が、あなたはhighlight()を呼び出すcomponentWillReceiveProps(nextProps)機能を持っています。 highlight関数は、小道具に基づいて状態を変更します。しかし：あなたがcomponentWillReceiveProps()内にあるため、この時点で小道具まだ（古い値を持って解決するために、あなたが強調表示するnextPropsを渡すことができますしかし、私は完全にテキストコンポーネントから状態を削除するために助言する

• あなたの。。。 <Text>コンポーネントは状態を持っていますが、必要はありません。コンポーネントのすべての異なるバリアントは、小道具によって決定されます。したがって、レンダリング機能内でレンダリングしたものに小道具を変換するロジックを配置する方が簡単です。メソッドは、render()です。状態は、コンポーネントのライフサイクル中にコンポーネント自体が変更される値（例えば、テキストフィールド内のユーザー入力など）のためのものです。

• あなたの時計では、getInitialState()を得るにはshowValueを返すだけです。コードの後半には、hours,minutes,secondsも記載されています。 すべてのものをgetInitialState()に初期値を含めて含むことをお勧めします。コードの読者は、このコンポーネントの状態であなたが管理しているものを知ることができます。これは正しい方向にあなたを助ける

・ホープ..

UPDATE：出発点として、あなただけのクロック成分で、単純化されたworking codepen hereを見つけることができます。 状態（現在の時刻）があり、単純に毎秒の時刻をレンダリングします。うまくいけば、そこからコードを追加することができます。