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

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

没有正确的方法，两种方式都可以接受，具体取决于案例。不同之处在于，对象（<b>hi</b>是React元素，它是一个对象）与defaultProps相同。如果prop值被组件变异，这可能会导致不良行为：

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元素的情况下是React.cloneElement），这可能不是问题，这是在React中做事的最好方法。

Answer 2

两种方式都是正确的。但对我来说，第二种方式更好，因为我使用它也代码看起来很酷。在这种情况下，您可以初始化值，以避免代码中断，并且您没有收到预期的值

而不是使用功能键麦芽汁，最好使用es6语法的功能组件。

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

或者如果您只想返回单个元素或对象，可以使用更短的语法，如：

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