分解纯功能组件中的道具

Question

假设我们具有以下纯函数：

const HeaderComponent = () => (
  <h1> Title <h1>
)

export default HeaderComponent

现在，我需要从props接收新的标题，因此我们经常进行结构调整this.props以避免访问title，this.props.title而在render方法中，我们将得到以下内容：

render() {
  const {Title} = this.props;
  return(
    <h1> {Title} </h1>
  )
}

问题是我们必须扩展React.Component类以访问render方法。

是否可以在纯函数中使用分解？

const HeaderComponent = props => (
   // const {Title} = this.props;
) 

Answer 1

您可以这样做。我还发现它是使函数进行自我记录的好方法。

const HeaderComponent = ({ title }) => (
   <h1>{ title }<h1>
)

也可以设置默认值

const HeaderComponent = ({ title: 'Default Title' }) => (
   <h1>{ title }<h1>
)

更新：正如TJ Crowder指出的，Title在上面的示例中大写。在文本部分为小写；因为这是规范，所以我使用了小写版本