react如何将组件内部的方法暴露给外部_react 怎么将一个方法暴露给window

最近在项目中遇到一个问题，就是需要在类的外部调用操作类内部的方法。

举个例子，我有一个Toast组件，在外部需要调用它的show方法来控制他的显隐状态。
之前我的写法是写一个静态类方法，然后在constructor中去修改它的作用域，代码如下：

// @flow
import React from 'react';
import './style.less';

type Props={
    time:number,
    text:string,
}

export default class Toast extends React.Component {
    static show({ text }) {
        const _self = this;
        this.setState({
            isShow: true,
            text,
        }, () => {
            _self.timer = setTimeout(() => {
                this.setState({
                    isShow: false,
                });
            }, this.props.time);
        });
    }

    constructor(props:Props) {
        super(props);
        this.state = {
            isShow: false,
            text: '',
        };
        Toast.show = Toast.show.bind(this);
    }

    componentWillUnmount() {
        this.setState({
            isShow: false,
        });
        clearInterval(this.timer);
    }

    render() {
        const { isShow, text } = this.state;
        return (
            <div className="toast-wrapper">
                {isShow && <div className="toast">{text}</div>}
            </div>
        );
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

后来发现bug频出，只有在重新刷新的时候show方法中调用this.setState()才有效，而在多个页面使用这个组件会出现很多问题，都是由于作用域绑定错误的原因。

解决方法

最后审视了下代码，应该是将静态的show方法指向内部的show方法，而不是把静态的show方法的上下文绑定到这个类上。

调整代码如下：

// ...
 constructor(props:Props) {
        super(props);
        this.state = {
            isShow: false,
            text: '',
        };
        Toast.show = this.show.bind(this); // 最重要的一步！！
    }

    show({ text }) {
        const _self = this;
        this.setState({
            isShow: true,
            text,
        }, () => {
            _self.timer = setTimeout(() => {
                this.setState({
                    isShow: false,
                });
            }, this.props.time);
        });
    }
// ....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

还是因为自己对bind理解不深刻的原因，看下mdn–bind