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

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

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

Answer 1

糟糕，因为其他人会忘记并大喊 WTF

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

一般，但是这样丑，分配默认值更优雅

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

更好，为什么不只是 return string 或 undefined

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'

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

Best practice to handle null props in React?

javascript

null

default-value

reactjs