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

Posted 2023-02-23

【中文标题】这是在反应中使用功能组件中的道具时的正确方法

【英文标题】：which is the correct way while using props in functional component in react

【发布时间】：2019-07-07 06:22:21

【问题描述】：

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

方式一：

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

你能推荐一下吗？

【参考方案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.cloneElement 在 React 元素的情况下），这可能不是问题，这是在 React 中做事的首选方式。

【讨论】：

感谢您的帖子，但传递元素不是我现在更改的问题。两者都可以接受，但哪个是更​​好的做法和好的代码？

这完全是一个偏好问题。正如我所指出的，主要区别在于，在第二种情况下，每个函数调用的对象默认值都是新的，这是一个很好的做法。但是，如果您不改变对象，这并不重要，这是另一个好习惯。在上次编辑中，您删除了 <b> 元素，如果 props 是标量值，则没有区别。

【参考方案2】：

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

与其使用功能键麦芽汁，不如对功能组件使用 es6 语法。

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

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

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