这是在反应中使用功能组件中的道具的正确方法

Question

which one is the correct way in react functional component and why?

Way 1:

export function renderElements(props) {

   let { value, element } = props;
   return (
     <!--- Code----!>
   )
}

renderElements.defaultProps = {
   value: 0,
   element: 'Hello'
}

Way 2

export function renderElements({
   value = 0,
   element = 'Hello'
}) {
   return (
     <!--- Code----!>
   )
}

Can you please suggest?

Answer 1

There's no correct way, both ways can acceptable, depending on a case. The difference is that objects ( <b>hi</b> is React element, which is an object) will be same with defaultProps . This may result in undesirable behaviour if prop values are mutated by a component:

export function renderElements(props) {
   let { value, element } = props;
   element.props.children = value; // affects all renderElements instances at once

   return element;
}

renderElements.defaultProps = {
   value: 0,
   element: <b>hi</b>
}

This may be not a problem if objects are immutable ( React.cloneElement in case of React element), which is preferable way to do things in React.

Answer 2

Both ways are correct. But for me, the second way is better because I am using it also code looks cool. You can initialize values in that case just to avoid code breaking and you are not receiving expected values

instead of using the function key wort, it's better to use es6 syntax for functional components.

`export const renderElements = ({
   value = 0,
   element = <b>hi</b>
 }) => {
   return (
     <!--- Code----!>
   )
 }`

or if you want to return only a single element or object you can use shorter syntax like:

`export const renderElements = ({
   value = 0,
   element = <b>hi</b>
}) => <!--- Code----!>`