Question

这似乎很基础，我保证已经被问到了……但是，我找不到它。 ReactJS菜鸟在这里；很好。

是否有一种方法可以将接口对象作为道具传递给子组件，而无需在接口中重新分配每个属性？

在下面的示例中，<MyChildComponent props={foo}/>显然不起作用，因为MyChildComponent期望props: IFoo。

interface IFoo {
    PropA: string;
    PropB: string;
}

export default class MyComponent extends React.Component<IFoo[], any> {
    constructor(props: IFoo[]) {
        super(props);
    }

    render() {
        return {this.props.map((foo: IFoo) => <MyChildComponent props={foo}/>)};
    }
}

export default class MyChildComponent extends React.Component<IFoo, any> {
    constructor(props: IFoo) {
        ...
    }
    ...
}

我可以做下面的事情，但是我不想将对象的每个属性都指定为显式道具。

...
render() {
    return {this.props.map((foo: IFoo) => <MyChildComponent PropA={foo.PropA} PropB={foo.PropB}/>)};
}
...

Answer 1

<MyChildComponent {...foo} />

将接口对象作为道具传递而无需显式指定每个属性值

1 个答案: