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')
    );
});

当我运行它时，我得到了：Uncaught TypeError：无法读取属性＆＃39; now＆＃39;在ClockTime.render上为null

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一个有效的示例，使用您的代码，但应用我已经分段的更改。

反应JS时钟组件

1 个答案: