React 传递 const 函数

Question

我正在 App.js 中计算时间并将其传递给孩子以显示。我知道这没有任何意义，但我正在练习学习如何创建 const 并发送给孩子，然后从孩子那里接受并在页面上打印。这个例子有效，但我认为有比我在这里做的更好的方法，不是吗？

App.js

const Time = () => {
  const dateBirth = moment('19010522', 'YYYYMMDD')
  const dateNow = moment()
  const difference = dateNow.diff(dateBirth, "years")
  return (
    <div>{difference}</div>
  )
}

class App extends Component {
  render() {
    const date = <Time />;
    return (
      <div>
        <Person Time={date} />
      </div>
    );
  }
}

export default App;

Person.js

export default function Person({ Time }) {
  return (
    <span>
        Time: {Time}
    </span>
  )
}

我也尝试像下面这样发送它，它没有用。为什么？

<Person Time={Time} />

Answer 1

如果您使用<Person Time={Time} /> 进行操作，那么您的 person 组件应如下所示：

export default function Person({ Time }) {
  return (
    <span>
        Time: <Time />
    </span>
  )
}