父组件通过配置项控制子组件显示问题

p1.js 父组件

import React, { Component } from 'react';
import Child from '../child'
export default P1 extends Component {
    constructor() {
        super()
        this.state = {
           arr: [
               {
                   text:'01',
                   time:10
               },
               {
                   text:'02',
                   time:20
               }
           ]
        }
        
   //child 组件

//逻辑为：p父组件传递的对象中的time 为计时器：
//子组件处理的逻辑为： 假如第一个对象time:10秒走第一个对象里面的参数改变state，到10秒之后，也就是走第二个对象的时候（计时器为 10~20区间的时候），div字体颜色为第二个对象的颜色。以此类推子组件处理逻辑，最后一个执行完清楚定时器，给一个默认问题提示


export default Child extends Component {
    constructor (props) {
        super(props)
        this.state = {
            istate:true, 
            color: 'gray', // 这里是动态的
            text:'0001'
        }
    this.show = props.options // arr
        //逻辑处理..
     }
     render() {
        return (
            <div style={`color:${this.state.color}`}>
                { this.state.text }              
            </div>
        );
    }
    
}

刚看react不久，请教大神..