React.js-在组件安装/卸载上更新图标样式

Question

我有一个正在构建的应用程序，它的左侧导航栏带有单击时打开模式的图标：

我已经成功地进行了设置，以便每当用户单击导航栏中的图标之一时，就会加载不同的模式，而我现在尝试更新状态以突出显示加载了哪个图标的模式，如下所示：< / p>

要实现这一目标，我必须处理父母/子女的关系和操纵状态。

父元素呈现<div>来捕获状态：

<div>
   <ActiveDashboardIcon data={this.state.data} />
</div>

然后我有了一个填充父<div>的子函数：

const ActiveDashboardIcon = ({ data }) =>
    <div>
        {data ? data :
            <ListItem button id="dashboardIcon" style={{ backgroundColor: 'black' }}>
                <ListItemIcon>
                    <DashboardIcon style={{ color: 'white' }} />
                </ListItemIcon>
            </ListItem>
        }
    </div>;

最后我要在componentDidMount和componentWillUnmount上进行更新，以便它更新按钮样式（图标颜色和背景颜色）：

componentDidMount() {
    this.setState({
        data:
            <ListItem button id="dashboardIcon" style={{ backgroundColor: 'white' }}>
                <ListItemIcon>
                    <DashboardIcon style={{ color: 'black' }} />
                </ListItemIcon>
            </ListItem>
    })
}

componentWillUnmount() {
    this.setState({
        data:
            <ListItem button id="dashboardIcon" style={{ backgroundColor: 'black' }}>
                <ListItemIcon>
                    <DashboardIcon style={{ color: 'white' }} />
                </ListItemIcon>
            </ListItem>
    })
}

这基本上可以按预期工作，但我正在努力完成一些事情：

1. 该当前方法适用于一个图标/模式组合，但是由于我无法为每个图标/模式组合定义不同的componentDidMount函数而难以扩展
2. 我当前的做法目前并未“取消选择”图标并将其恢复为componentWillUnmount上的原始样式
3. 我不知道如何为图标添加onClick属性： onClick={this.openModal("dashboard")}。当我尝试将其包含在子元素中时，浏览器无法读取属性'openModal'，因为它是父元素的一部分。

我不确定实现自己追求的最佳方法。