从 ReactJs 组件中添加或删除类答案

【问题标题】：Add or remove class from ReactJs component从 ReactJs 组件中添加或删除类
【发布时间】：2018-06-26 02:50:33
【问题描述】：

我有一些多边形，我需要使用它们的 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 正确应用，但在更改状态后没有动态的应用内更改。

【问题讨论】：

CSS 类似乎与您在组件中使用的不同？ :S
Ups，这是一个错字。我改变了这个问题:)

标签： css reactjs components

【解决方案1】：

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

【讨论】：

【解决方案2】：

毕竟有 react-leaflet 内置属性 fillOpacity

所以我只需要更改该属性。

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

                    })
                }
            </div>
        )
    }

【讨论】：