时间戳

首页 > 解决方案 > 重构问题，尝试注入函数但失败

reactjs - 重构问题，尝试注入函数但失败

问题描述

我正在使用 react 创建一个测试组件，该组件用于ContainerA和ContainerB。

测试组件：

renderTitle(){

    let mode = this.modeType[this.state.mode];

    switch (mode){
        case 'A':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>A</div>
                </div>;
            break;
        case 'B':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>B</div>
                </div>;
            break;
        case 'C':
            title =
                <div onClick={this.switchMode.bind(this,'next')}>
                    <div>C</div>
                </div>;
            break;
        case 'D':
            title =
                <div>
                    <div>D</div>
                </div>;
            break;
    }

    return(
        <div className="d-flex justify-content-around">
            {title}
        </div>
    );
}

而且我发现模式 A,B,C 只会在ContainerA中使用，而模式 D 只会在ContainerB中使用。

所以我尝试将测试组件重构为以下内容：

renderTitle(){

    let mode = this.modeType[this.state.mode];

    let title = this.props.setTitle(mode);

    return(
        <div className="d-flex justify-content-around">
            {title}
        </div>
    );
}

并更改容器如下：

集装箱A

export class ContainerA extends Component{

    setTitle(mode){

        switch (mode){
            case 'A':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>A</div>
                    </div>;
                break;
            case 'B':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>B</div>
                    </div>;
                break;
            case 'C':
                title =
                    <div onClick={this.switchMode.bind(this,'next')}>
                        <div>C</div>
                    </div>;
                break;
        }

        return title
    }

    render(){
        return(
            <div >
                <Test setTitle={this.setTitle.bind(this)}/>
            </div>
        )
    }
}

集装箱B

export class ContainerA extends Component{

    setTitle(mode){

        let test=    
            <div>
                <div>D</div>
            </div>;


        return title
    }

    render(){
        return(
            <div >
                <Test setTitle={this.setTitle.bind(this)}/>
            </div>
        )
    }
}

但是switchMode()是在测试组件内部，那么如何设置 onClick 事件处理程序呢？

标签： reactjsrefactoring

解决方案

我用来从子组件内部处理的事件调用父组件中的函数的解决方案如下。

家长班

class Parent extends React.Component {
    actualEvent(data) {
        // do something here
    }
    render() {
        return <Child onClick={this.actualEvent.bind(this)}/>
    }
}

儿童班

class Child extends React.Component {

    onClick(evt) {
        if (this.props.onClick)
            this.props.onClick(/* some data if required */);
    }
    render() {
        return (
            <div onClick={this.onClick.bind(this)}>whatever</div>
        )
    }
}

基本上，这个想法是在实际事件发生的子组件中，您调用一个函数，将其作为父级的属性应用。

推荐阅读