React 中处理 null props 的最佳实践？

Question

考虑我有两个组件：

// 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

属性传递给

Hello

组件，

Hello

组件将不会使用默认值，而是仅使用

null

作为值并渲染它。

仅当我明确传递

undefined

或不传递任何内容时才会使用默认值：

<Hello name={undefined} />
<Hello />

// renders Hello mike

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

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

或者我应该在子组件中处理它，如下所示：

// Hello.js

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

有什么“最佳实践”来帮助解决这个问题吗？

Answer 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> {

随心所欲地选择，因为最好的成本最高

Answer 2

您可以使用JS空合并运算符通过以下方式实现：

props.name ?? 'Default value'

Answer 3

可以说，处理这种情况的最干净的方法是这样的：

import React from "react";

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

也就是说，如果您希望在没有名称的情况下显示该消息。否则...

export default function Hello({ name }) {
  if (!name) return null;
 
  return <div>Hello {name}</div>;
}

请记住，在最后一个场景中，如果组件

Hello

使用任何钩子

if (!name) return null;

必须位于这些钩子之后，因为不应有条件地渲染钩子。