在纯函数组件中解构道具

Question

假设我们有以下纯函数：

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

export default HeaderComponent

现在我需要从道具中接收新标题，因此我们经常对this.props进行解构以避免使用title访问this.props.title，并且在渲染方法中我们会有类似的内容：

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

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

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

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

Answer 1

你可以这样做。我也发现这是一种使函数自我记录的好方法。

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

也可以设置默认值

Title

更新： 正如T.J. Crowder指出的那样，{{1}}在上面的示例中大写。在文本部分，它是小写的;因为这是常态，我使用了小写版本

Answer 2

针对您的具体情况，请参阅ken4z's answer，因为参数解构是最简洁的方法。

但是在一般情况下：如果你有逻辑，你需要在返回之前放入箭头函数，只需使用箭头函数的详细形式：

const HeaderComponent = props => {
  const {Title} = props;
  // ....more logic can go here...
  return <h1>{Title}<h1>;
};

但同样，您不需要 从Title抓取props。

（旁注：如果属性名称或变量名称为T，则title中的const HeaderComponent = ({ title }) => ( <h1>{ title }<h1> ) 大写是不常见的。） < / p>