当前位置：首页 > React

react如何给组件默认值

2026-01-25 16:39:39React

设置默认 Props

在 React 中，可以通过 defaultProps 属性为组件设置默认值。这种方式适用于类组件和函数组件（通过 .defaultProps 属性）。

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

MyComponent.defaultProps = {
  name: "Default Name"
};

函数组件默认参数

对于函数组件，可以使用 ES6 默认参数语法直接为 props 设置默认值：

react如何给组件默认值

function MyComponent({ name = "Default Name" }) {
  return <div>{name}</div>;
}

默认 Props 与 TypeScript

在 TypeScript 中，可以通过接口定义 props 并设置默认值：

interface Props {
  name?: string;
}

function MyComponent({ name = "Default Name" }: Props) {
  return <div>{name}</div>;
}

默认 Children

对于 children 的默认值，可以通过条件渲染实现：

react如何给组件默认值

function MyComponent({ children }) {
  return <div>{children || "Default Content"}</div>;
}

默认状态值

对于组件内部状态，可以在构造函数或 useState 中设置默认值：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

function MyComponent() {
  const [count, setCount] = useState(0);
}

合并默认 Props

当需要深度合并默认 props 时，可以使用工具如 lodash 的 _.defaultsDeep：

const defaultProps = {
  config: {
    color: "blue",
    size: "medium"
  }
};

function MyComponent(props) {
  const mergedProps = _.defaultsDeep(props, defaultProps);
}