css - 在 ReactJs 组件中添加或删除类

Question

我有一些多边形，我需要使用它们的 fill-opacity CSS 属性。

render() {
    const opacity = this.props.disableOpacity ? 'transparent' : 'solid';
    const classes = `${opacity} opacity`;

    return (
        <div className={'ZoneLayer'}>
            {
                this.zones.map(zone => {
                    return (
                        <Polygon key={zone['id']}
                                 positions={zone['coordinates']}
                                 color={zone['available'] ? "#6dfdae" : "#dddddd"}
                                 className={classes}
                        >
                            <Tooltip direction={"top"} sticky={true} className={"zone-tooltip"}>
                                <span>{zone['text']}</span>
                            </Tooltip>
                        </Polygon>
                    );

                })
            }
        </div>
    )
}

我使用这些 CSS

.solid {
    fill-opacity: 1 !important;
}

.transparent {
    fill-opacity: 0.4;
}

该类最初加载并且 CSS 正确应用，但在更改状态后没有动态应用内更改。

Answer 1

你依赖于 props 来改变类值。您需要更改父组件的 Prop 或将 disableOpacity 值保存在当前组件的状态中。注意:如果 props 每次都在变化，你的代码就可以正常工作