Question

我有一个名为“ Common”的通用组件，该组件可从URL获取图像。在获取图像之前，我想将变量的状态设置为true，一旦完成获取，将状态设置为false。而且我需要使用父组件中的状态说“ ParentComponent”来添加微调器。我通过在父组件中定义方法set_loading来实现此目的，如下

set_loading = () => this.setState({loading:!this.state.loading});

然后我将此方法传递给下面的子组件，

return ( 
    <ChildComponent 
        on_set_loading = {this.set_loading}

下面是子组件

export default class ChildComponent extends React.Component {
    load_image = () => {
    this.props.on_set_loading();
    client.get(this.props.get_url, this.unmount)
        .finally(() => this.props.on_set_loading())
        .then(({response}) => {
            //do something
        })
        .catch(() => {})
    };

}

但是，还有另一个使用此子组件的组件，如下所示，

export default class AnotherComponentSharingChild extends React.component {
    return (
         <ChildComponent />
    )
}

在这里，我们看到anothercomponentsharingchild组件没有将set_loading方法发送到子组件。因此，这将引发错误set_loading不是函数。

我该如何解决。我希望父组件的此加载状态能够基于加载状态添加微调器。但是不希望将该加载状态状态加载到另一个组件共享子组件。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

最佳做法是在这种情况下使用默认道具：

export default class ChildComponent extends React.Component {
    static get defaultProps() {
        return {
            on_set_loading: () => {}
        };
    }    

    load_image = () => {
    this.props.on_set_loading();
    client.get(this.props.get_url, this.unmount)
        .finally(() => this.props.on_set_loading())
        .then(({response}) => {
            //do something
        })
        .catch(() => {})
    };

}

如何在一个通用组件中使用一种方法，以使其由需要它的一个组件和不需要它的其他组件使用？

1 个答案: