Question

考虑一下

class CarMaker extends React.Component {
    constructor(props) { super(props); }
    handleEvent() { /* common handler code */  }

    getComponent() {
        let component = null;

        switch(type) {
            case 'hatchback':
                // unique logic about hatchbacks
                // consider attribues computed inside each case
                component = <HatchbackMaker {...hatchbackAttrs} />;
                break;
            case 'sedan':
                component = <SedanMaker {...sedanAttrs} />;
                break;
            case 'truck':
                component = <TruckMaker {...truckAttrs} />;
                break;
        }
        // Is there any way to attach event handler like this dynamically?
        component.onClick = this.handleEvent.bind(component);
        return component;
    }

    render() {
        let arr = [];
        dataList.forEach(function(dataItem) {
            arr.push(this.getComponent(dataItem.type));
        }, this);

        return (<div>{arr}</div>;)
    }
}

将onClick处理程序添加到现有组件（保存在变量中）并将该组件本身绑定为“this”值的最佳方法是什么？

Answer 1

为什么不在分配时分配onClick事件

getComponent() {
        let component = null;

        switch(type) {
            case 'hatchback':
                // unique logic about hatchbacks
                // consider attribues computed inside each case
                component = <HatchbackMaker {...hatchbackAttrs} onClick={this.handleEvent.bind(this)}/>;
                break;
            case 'sedan':
                component = <SedanMaker {...sedanAttrs} onClick={this.handleEvent.bind(this)}/>;
                break;
            case 'truck':
                component = <TruckMaker {...truckAttrs} onClick={this.handleEvent.bind(this)}/>;
                break;
        }

        return component;
    }

我已经在上面的例子中显示了与属性分开的道具，因为我不知道它们包含什么，你也可以传递相应的prop attributes。

Answer 2

您希望根据通过的类型动态创建元素。

确保在开始时将类型更改为大写字母。

E.g。＆＃34;轿车＆＃34; - ＆GT; ＆＃34;轿车＆＃34;

或者使用JS来大写它。

class Cars extends React.Component {
    constructor(props) { 
        super(props);

        this.state = {
            carData: []
        };
    }
    OonClickHandler() { 
        /* common handler code */  
    }
    componentWillMount() {
        //Api call to server to get car types just for example
        $.ajax("someUrl", success: (data) => {
            //[ { title: 'Honda City', type: 'sedan', shapeSVGURL: '<url>', . . //more properties . }, { title: 'VW Golf', type: 'hatchback', otherUniqueAttrs: [] . //more properties . } ]
            this.setState({carData: data});
        });
    }
    render() {
        return (
            <div>
                //Make sure that type has upper case later at start or use JS to make it so
                this.state.carData.map(car => React.createElement(car[type], {...car, onClick={this.onClickHandler}}))
            </div>
        )
    }
}

class Honda extends React.Component {
    render() {
        return (

        )
    }
}

class VWGolf extends React.Component {
    render() {
        return (

        )
    }
}

向现有反应组件添加onclick处理程序

2 个答案: