React JS时钟组件

Question

我想让组件制成的时钟反应。我希望来自不同组件的每个值。我得到的代码：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class ClockTimeHour extends React.Component{ 
    render(){ 
    return <h1>{this.props.date.getHours()}</h1> 
    } 
} 

class ClockTimeMinute extends React.Component{ 
    render(){ 
    return <h1>{this.props.date.getMinutes()}</h1> 
    } 
} 

class ClockTimeSecond extends React.Component{ 
    render(){ 
    return <h1>{this.props.date.getSeconds()}</h1> 
    } 
} 

class ClockDateYear extends React.Component{ 
    render(){ 
    return <h1>{this.props.date.getFullYear()}</h1> 
    } 
} 

class ClockDateMonth extends React.Component{ 
    render(){ 
    return <h1>{this.props.date.getMonth()}</h1> 
    } 
} 

class ClockDateDay extends React.Component{  
    render(){ 
    return <h1>{this.props.date.getDate()}</h1> 
    } 
} 

class ClockTime extends React.Component{ 

    render(){ 
    return (
     <div> 
     <ClockTimeHour date={this.state.now}/> 
     <ClockTimeMinute date={this.state.now}/> 
     <ClockTimeSecond date={this.state.now}/> 
     </div> 
    ); 
    } 
} 

class ClockDate extends React.Component{ 
    render(){ 
    return (
     <div> 
     <ClockDateYear date={this.state.now}/> 
     <ClockDateMonth date={this.state.now}/> 
     <ClockDateDay date={this.state.now}/> 
     </div> 
    ); 
    } 
} 

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

    componentDidMount() { 
    this.timerId=setInterval(()=>{ 
     this.setState({ now : new Date() }); 
    },1000); 
    } 

    render(){ 
    return (
     <div> 
     <ClockTime date={this.state.now}/> 
     <ClockDate date={this.state.now}/> 
     </div> 
    ); 
    } 
} 

document.addEventListener('DOMContentLoaded', function(){ 
    ReactDOM.render(
     <Clock/>, 
     document.getElementById('app') 
    ); 
}); 

，当我运行它，我得到了：遗漏的类型错误：在ClockTime.render

无法读取空的特性“现在”

Answer 1

您没有设置状态的组件，您提及，但你是通过它的道具作为date这里<ClockTime date={this.state.now}/>，所以我想你可能会想改变：

class ClockTime extends React.Component{ 
    render(){ 
    return <div> 
    <ClockTimeHour date={this.state.now}/> 
    <ClockTimeMinute date={this.state.now}/> 
    <ClockTimeSecond date={this.state.now}/> 
    </div> 
    } 
} 

到：

class ClockTime extends React.Component{ 
    render(){ 
    return (
     <div> 
     <ClockTimeHour date={this.props.date}/> 
     <ClockTimeMinute date={this.props.date}/> 
     <ClockTimeSecond date={this.props.date}/> 
     </div> 
    ); 
    } 
} 

你可以找到here一个工作示例，使用你的代码，但应用我已经分割的更改。