что является правильным способом при использовании реквизита в функциональном компоненте в реакции

Question

Какой путь является правильным в реагирующем функциональном компоненте и почему?

Способ 1:

export function renderElements(props) {

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

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

Способ 2

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

Можете ли вы предложить?

Answer 1

Оба способа верны.Но для меня второй способ лучше, потому что я использую его, и код выглядит круто.В этом случае вы можете инициализировать значения, чтобы избежать взлома кода, и вы не получите ожидаемые значения

вместо использования функциональной клавиши wort, для функциональных компонентов лучше использовать синтаксис es6.

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

или если вы хотите вернуть только один элемент или объект, вы можете использовать более короткий синтаксис, например:

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

Answer 2

Там нет правильного пути, оба пути могут быть приемлемыми, в зависимости от случая.Разница в том, что объекты (<b>hi</b> - это элемент React, который является объектом) будут одинаковыми с defaultProps.Это может привести к нежелательному поведению, если значения реквизита изменяются компонентом:

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>
}

Это может не быть проблемой, если объекты неизменны (React.cloneElement в случае элемента React), что является предпочтительным способомделать вещи в React.