首页 > 解决方案 > React 传递 const 函数

问题描述

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

应用程序.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;

人.js

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

我也试着像下面这样发送它,它没有用。为什么?

<Person Time={Time} />

标签: reactjs

解决方案


如果你是通过 using 来做的<Person Time={Time} />,那么你的 person 组件应该是这样的:

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

推荐阅读