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

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

Answer 2

毕竟，有反应传单builtIn属性 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>
        )
    }

从ReactJs组件添加或删除类

2 个答案: