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

【问题标题】：Best practice to handle null props in React?在 React 中处理 null 道具的最佳实践？
【发布时间】：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>;

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

【问题讨论】：

标签： javascript reactjs null default-value

【解决方案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'

【讨论】：