在 React 中处理 null 道具的最佳实践？

Posted 2023-03-15

【中文标题】在 React 中处理 null 道具的最佳实践？

【英文标题】：Best practice to handle null props in React?

【发布时间】：2021-03-06 22:37:47

【问题描述】：

假设我有两个组件：

// Hello.js

import React from "react";

export default function Hello(props) 
  const  name = "mike"  = props;
  return <div>Hello name</div>;

// App.js

import React from "react";
import Hello from "./Hello";

export default function App() 
  return (
    <div>
      <Hello name=null />
    </div>
  );


// renders Hello

如果我将null props 传递给Hello 组件，Hello 组件将不会使用默认值，而是使用null 作为值并呈现它。

仅当我明确传递undefined 或不传递任何内容时才会使用默认值：

<Hello name=undefined />
<Hello />

// renders Hello mike

所以我的问题是我应该如何正确处理 null 道具？像这样将它传递给子组件时，我是否应该在父组件中处理它：

// App.js
<Hello name=getName() || 'mike' />

或者我应该像这样在子组件中处理它：

// Hello.js

return <div>Hello name || "mike"</div>;

是否有任何“最佳实践”来帮助处理这个问题？

【参考方案1】：

不好，因为别人会忘记并大喊WTF

// App.js
<Hello name=getName() || 'mike' />

如此，但这很难看，分配默认值更优雅

// Hello.js
return <div>Hello name || "mike"</div>;

更好，为什么不直接返回字符串或未定义

function getName()
  ...
  return something || undefined

最好，人们不会总是这样做，如何确保？ TypeScript 会在编译时检查它

interface Props 
    name: string;

interface State 
    xxx: xxx

class Hello extends React.Component<Props, State> 

随心所欲，性价比最高

【参考方案2】：

你可以使用JS空合并操作符来实现如下方式：

props.name ?? 'Default value'