Reactjs 如何通过单击“其他”来添加和删除元素的类？在反应中重复

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

对于redux实现，您将从第一个元素对click事件分派操作；第二个元素的类将从状态（它的一个道具）派生，因此当响应单击而更改时，它将使用新的类名重新呈现

---

惯用用法可能将这两个元素包装在一个容器组件中，该容器组件协调了道具和调度事件；通常使用连接方法。

我解决了此问题，请按照以下步骤进行操作：

完成单击的元素：

    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>
        );
    }
}

减速器：

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>
        )
    }
}

导出类XYZ扩展组件{
建造师（道具）{
超级（道具）；
}
renderClassNames（）{
让classname=“幻灯片浏览信息”；
if（this.props.readMore）{
classname+=“幻灯片浏览比例”；
}
返回类名；
}
render（）{
返回(
)
}
}

导出默认类MyClass扩展组件{
建造师（道具）{
超级（道具）；
这个州{
toggleClass:false
}
}
toggleFunction=（）=>{
this.setState（{toggleClass:！this.state.toggleClass}）
}
render（）{
返回(
点击我
)
}
}

您可能有理由使用redux，但也可以使用组件状态解决此问题，而不会增加存储的复杂性。这不是通过redux实现的。您正在本地更改状态。

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>
        )
    }
}