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----!>`

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

2 个答案: