React组件传入null时defaultProps不生效的解决方案问询

结论 #

完全可以仅通过修改组件本身的逻辑实现该需求。React 原生的 defaultProps 以及函数组件的默认参数，仅会在 prop 取值为 undefined 时触发默认值填充，传入 null 时会被视为有效值直接使用，所以我们只需要在组件内部对传入的 props 做一次归一化处理即可。

实现方案 #

• 方案1：组件内直接做 props 归一化（适配所有组件类型） #

  先把所有取值为 null 的 prop 替换为 undefined，之后不管是用默认参数还是原生 defaultProps 都可以正常生效。
  函数组件示例：

  const DemoComponent = (rawProps) => {
    // 归一化处理：将null替换为undefined
    const props = Object.fromEntries(
      Object.entries(rawProps).map(([key, value]) => [key, value === null ? undefined : value])
    )
    // 解构时使用默认值即可自动生效
    const { title = "默认标题", count = 0, content = "默认内容" } = props;
  
    return <div>{title}：{content}</div>
  }
  

  类组件示例：

  class DemoComponent extends React.Component {
    static defaultProps = {
      title: "默认标题",
      count: 0,
      content: "默认内容"
    }
    render() {
      // 归一化处理
      const props = Object.fromEntries(
        Object.entries(this.props).map(([key, value]) => [key, value === null ? undefined : value])
      )
      // 合并defaultProps即可
      const finalProps = {...this.constructor.defaultProps, ...props}
      return <div>{finalProps.title}：{finalProps.content}</div>
    }
  }
  

• 方案2：封装高阶组件统一处理（适配多组件复用场景） #

  如果你有多个组件都需要适配这个逻辑，可以封装高阶组件一次处理，避免重复代码：

  // 高阶组件封装
  const withNullAsUndefined = (Component, componentDefaultProps) => {
    const Wrapped = (rawProps) => {
      const normalizedProps = Object.fromEntries(
        Object.entries(rawProps).map(([k, v]) => [k, v === null ? undefined : v])
      )
      return <Component {...normalizedProps} />
    }
    Wrapped.defaultProps = componentDefaultProps
    return Wrapped
  }
  
  // 使用示例
  const DemoComponent = withNullAsUndefined(({title, content}) => {
    return <div>{title}：{content}</div>
  }, {
    title: "默认标题",
    content: "默认内容"
  })
  

以上所有修改都仅在组件侧完成，不需要调整外部传入prop的逻辑，完全适配无法控制Wordpress传入参数的场景。

内容的提问来源于stack exchange，提问作者Mathis Hüttl