如何为对象 React Typescript 设置 defaultProps

Question

我的问题： 当我设置三个可选值之一时，只有那个值是可见的，其他默认值都消失了。

type ComponentProps = {
 title: string,
 children: JSX.Element,
 options: {
  iconType?: string,
  color?: string,
 }
}
 const Component = ({ title, children, options = {color: '#D3A82B', iconType: 'alert'}: ComponentProps) => {
 return <AnotherComponent color={options.color} iconType={options.iconType}/>
}

用法：

<Component iconType='danger' />
// default color option is gone

Answer 1

您的“用法”与您提供的 ComponentProps 不符。你的COmponentProps说你期待一个options道具与color和iconType可选属性，但你的用法表明你期待color和iconType本身是道具，而不是option ....?

如果你想拥有options

如果 options 在您的组件道具类型中是可选的，那么为 options 提供默认值才有意义；否则，将不会使用默认值，因为调用者需要提供options。

如果你想为options的iconType和color属性以及选项本身提供默认值，你需要将options标记为可选，然后为color和iconType提供默认值（可能通过解构)，并为options提供一个整体默认值（如果所有选项都有自己的默认值，则可以是{}）：

type ComponentProps = {
    title: string;
    children: React.ReactNode;
    options?: {
        // Added `?` to make `options` optional
        iconType?: string;
        color?: string;
    };
};
const Component = ({
    title,
    children,
    //       vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv−−− defaults for `color` and `iconType`
    options: { color = "#D3A82B", iconType = "alert" } = {},
}: //                                                    ^^−− default for `options` as a whole
ComponentProps) => {
    // ...use `color` and `iconType` here...
};

现场示例（注释掉了 TypeScript 类型）：

/*
type ComponentProps = {
    title: string;
    children: React.ReactNode;
    options?: {
        iconType?: string;
        color?: string;
    };
};
*/
const Component = ({
    title,
    children,
    options: { color = "#D3A82B", iconType = "alert" } = {},
}/*: ComponentProps*/) => {
    return (
        <div>
            color = {color}, iconType = {iconType}
        </div>
    );
};

const Example = () => {

    // No options at all
    const ex1 = <Component title="ex1">ex1</Component>;

    // Just `color`
    const ex2 = <Component title="ex2" options={{color: "blue"}}>ex2</Component>;

    // Just `iconType`
    const ex3 = <Component title="ex3" options={{iconType: "information"}}>ex3</Component>;

    // Both
    const ex4 = <Component title="ex4" options={{color: "blue", iconType: "information"}}>ex4</Component>;

    return (
        <div>
        {ex1}
        {ex2}
        {ex3}
        {ex4}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

如果你不想拥有options

...然后 `ComponentProps 需要扁平化一点，您只需直接提供默认值即可：

type ComponentProps = {
    title: string;
    children: React.ReactNode;
    // No `options` layer
    iconType?: string;
    color?: string;
};
const Component = ({
    title,
    children,
    color = "#D3A82B",
    iconType = "alert",
}: ComponentProps) => {
    // ...use `color` and `iconType` here...
};

现场示例（注释掉了 TypeScript 类型）：

/*
type ComponentProps = {
    title: string;
    children: React.ReactNode;
    iconType?: string;
    color?: string;
};
*/
const Component = ({
    title,
    children,
    color = "#D3A82B",
    iconType = "alert",
}/*: ComponentProps*/) => {
    return (
        <div>
            color = {color}, iconType = {iconType}
        </div>
    );
};

const Example = () => {

    // No `color` or `iconType`
    const ex1 = <Component title="ex1">ex1</Component>;

    // Just `color`
    const ex2 = <Component title="ex2" color="blue">ex2</Component>;

    // Just `iconType`
    const ex3 = <Component title="ex3" iconType="information">ex3</Component>;

    // Both
    const ex4 = <Component title="ex4" color="blue" iconType= "information">ex4</Component>;

    return (
        <div>
        {ex1}
        {ex2}
        {ex3}
        {ex4}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>