reactjs - 这是在 React 的功能组件中使用 props 的正确方法

Question

哪一种是 React 功能组件中正确的方法，为什么？

方式一:

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 中执行操作的更好方法。