reactjs - 如何通过单击其他元素来添加和删除元素的类？在 React-redux 中

Question

我想通过单击 React-Redux 中的另一个元素来切换元素的类。

Answer 1

我解决了这个问题，请按照以下步骤操作:

完成点击的元素:

    class readMore extends Component {

    constructor(props) {
        super(props);

        this.state = {classToSend: true };
    }

    stateToRender(){
        (this.state.classToSend) ? this.setState({classToSend: false}) : this.setState({classToSend: true});
    }

    onClickHandler(){
        this.stateToRender();
        this.props.readMore(this.state.classToSend);
    }

    render(){
        return (
            <div onClick={() => this.onClickHandler()}
                className="readmore">
                <div className="readmore-btn">Read more</div>
            </div>
        );
    }
}

Action 创建者:

export function readMore(class_something) {

    return {
        type: READ_MORE,
        payload: class_something
    };

}

reducer :

export default function (state="", action) {

    switch(action.type){

        case READ_MORE:

            return action.payload;
    }

    return state;
}

类应该更改的其他元素:

export class XYZ extends Component{

    constructor(props){
        super(props);
    }

    renderClassNames(){
        let classname = "slide-tourInfo";

        if (this.props.readMore) {
            classname += " slide-tourInfo-scale";
        }

        return classname;
    }

    render(){
        return(
            <div className = {this.renderClassNames()}>

            </div>
        )
    }
}