Question

我想访问另一个组件的userLogout函数。

我已阅读此react-js-access-to-component-methods。但是，对我来说似乎唯一可行的方法是。

有人知道另一种更简单，更短的方法吗？我的目标是使所有逻辑脱离基本组件。

@azium指出我正在使用派生类。最初的目标是可以访问static defaultProps，以便以错误的方式解决问题。

class Funcs extends React.Component {
    // this is the derived class way I was hoping to have (much cleaner)
    static defaultProps = {
      text: 'hello'
    }
    constructor(props) {
        super(props);
    }

    userLogout() {
        console.log('userLogout');
    }

    render() {
        return null;
    }
}

class Base extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    MyWidget = (el, refCb) => {
        ReactDOM.render(<Funcs ref={refCb} />, el);
    };

    componentDidMount() {
        this.MyWidget(document.getElementById('nothing'), widget => {
            console.log('there you are...', widget);
            this.setState({
                widget
            });
            // works too
            this.widget = widget
        });
    }

    render() {
        console.log('widget', this.state.widget, this.widget);
            return <div id="nothing" />
    }
}

Answer 1

这是在非派生类上具有defaultProps的解决方案。

class Funcs {
    constructor(props) {
        this.props = Object.assign({}, this.defaultProps, props);
    }

    defaultProps = {
        userLogout: {
            onCompleted: () => this.props.nextRouter.pushRoute('home_v01', { lng: this.props.nextRouter.query.lng }),
            onError: err => console.log('An error occured, ', err)
        }
    };

    userLogout = () => {
        LogoutMutation.commit({
            environment: this.props.environment,
            onCompleted: this.props.userLogout.onCompleted,
            onError: this.props.userLogout.onError
        });
    };
}

class Base extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    funcs = new Funcs({
        environment: this.props.relay.environment,
        nextRouter: this.props.nextRouter,
        userLogout: {
            onCompleted: () => console.log('LOG OUT')
        }
    });

    render() {
        return <div onClick={this.funcs.userLogout}>Log out</div>
    }
}

访问另一个组件的方法并为其提供defaultProps

1 个答案: