javascript - 一旦构建了React项目， Prop 会发生什么？

我正在用React构建一个项目，遇到一个我不知道如何解决的问题，因为从概念上讲，这超出了我的范围。

在我的项目中，我将JavaScript Date对象作为道具传递给组件。
然后，我将此数据存储为组件中的状态。
然后，该日期状态将用于更新时间轴栏，显然，该时间轴需要最新才能使时间轴前进。

下面是该代码的简化版本：

DateComponent文件：

class DateComponent extends Component{
  constructor(props){
    super(props);
    this.state = {
      start: new Date(this.props.start)
    }

  render() {
    return (
      <div data-custom-attr={this.state.start}></div>
    )
  }
}

传递道具：

<DateComponent
  start={new Date()}
/>

在我完成的项目中，我将渲染一些HTML，如下所示：

<div data-custom-attr="date-string"></div>

无论如何，我都能得到它，以便如果我随后构建React项目，如果我想用新的日期更新data-custom-attr，或使用纯JavaScript使它返回当前日期，它将执行所需的操作在反应环境中？

最佳答案

要使用道具主动更新该道具，您需要触发重新渲染，因为您正在将道具存储到状态中，或者需要使用诸如componentWillUpdate之类的生命周期方法在父级上捕获更新，然后再次使用setState（我不建议使用此生命周期方法，因为Facebook已弃用该方法。

就个人而言，您只需要简化组件即可。而不是使用DateComponent管理日期状态，只需将其提取到父级并将日期属性直接传递到html。每当开始更新时，都会更新DateComponent。例如：

父母

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate = new Date()
    }
  }

  render = () => {
    const {currentDate} = this.state;
    return (
      <DateComponent start={currentDate} />
    )
  }
}

DateComponent

class DateComponent extends Component{
  constructor(props){
    super(props);
  }

  render() {
    const {start} = this.props;
    return (
      <div data-custom-attr={start}></div>
    )
  }
}

关于此的最酷的事情是，通过将DateComponent简化为静态，可以进一步简化此组件。您也可以利用其中的一些新功能，例如上下文，但是，我在这里不做介绍。

静态DateComponent

const DateComponent = ({start}) => (
  <div data-custom-attr={start}></div>
)