分解纯功能组件中的道具

Question

Suppose we have the following pure function:

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

export default HeaderComponent

Now I need to receive the new title from props, so we often destructure this.props to avoid accessing title with this.props.title and in the render method we will have something like:

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

The thing is we have to extend React.Component class to access render method.

Is it possible to use the destructure in pure functions?

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

Answer 1

You can do it like this. I also find it a nice way of making the function self documenting.

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

Also can set default values

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

UPDATE: As TJ Crowder points out, Title is capitalized in your examples above. In the text portion it is lowercase; as that is the norm, I have used the lowercase version

Answer 2

For your specific situation, see ken4z's answer , as parameter destructuring is the most concise way to do that.

But in the general case: If you have logic you need to put in the arrow function prior to the return, just use the verbose form of arrow function:

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

But again, you don't need that just to grab Title from props .

---

(Side note: It's unusual to capitalize the T in title when it's a property name or variable name...)