Reactjs 反应CSS转换不起作用，类永远不会被应用

这是我在react组件中的方法。我遵循了react组件中的所有提示，并从中复制了CSS，以了解它是如何工作的，但我似乎无法让它工作。它们似乎从未获得活动类，如果我从react developer工具中切换道具，它将完成退出和进入完成类，但我没有这些类

我有一种感觉，我在工作中遗漏了一些东西

以下是方法代码：

onSelectYear(event){
    const selected_year = event.target.value;
    const newState = (() => {
        let array_to_render = [];
        let selected_object = data[selected_year];
        for( var items in selected_object) {
                array_to_render.push(
                <CSSTransition key = {selected_year+items}
                       in = {true}
                       timeout = {300}>
                    <div  className = {styles.datesContainer}>
                        <a key = {items} onClick = {this.props.updateDetailView}>
                             {items}
                        </a>

                    </div>
                </CSSTransition>
                )

         }

        return array_to_render
    })();
    this.props.selected_month ?
        this.props.updateSearchView({data:data,search_view:newState,selected_year:selected_year,
        latest_update:latest_data["update_date"],selected_month:"" }) :
        this.props.updateSearchView({data:data,search_view:newState,selected_year:selected_year,
        latest_update:latest_data["update_date"]})
}

在select元素上调用该方法

          <select  value = {this.props.selected_year? 
          this.props.selected_year:"0"} onChange = {this.onSelectYear}>
                <option value = "0" >Select Year</option>
                <option value = "2016">2015-2016</option>
                <option value = "2017">2016-2017</option>
                <option value = "2018">2017-2018</option>
            </select>

选择年份
2015-2016
2016-2017
2017-2018

您需要通过向

cstranslation

提供

classnames

道具来告诉React Transition Group您的CSS类名是从什么开始的。添加一个

classNames=“message”

prop:

---

您需要通过向

cstranslation

提供

classnames

道具来告诉React Transition Group您的CSS类名是从什么开始的。添加一个

classNames=“message”

prop:

styles.datesContainer是什么？它必须包含大量的

消息

。尝试直接输入

消息

而不是使用css-modules。在复制粘贴时错过了classNames参数。我将尝试使用小提琴，以便更清楚地了解。什么是

样式。datesContainer

计算到？它必须包含大量的

消息

。尝试直接输入

消息

而不是使用css-modules。在复制粘贴时错过了classNames参数。我将尝试使用小提琴，以便更清晰。我接受了@Ross Allen答案作为正确答案。但像我这样的准学习者的未来参考，我想补充一点，如果你开始使用webpack css loader并尝试在CSTransition中使用类名，别忘了在index.html中链接你的样式表，我想为什么我的类没有像我那样出现，疯狂地盯着屏幕看了几个小时，希望动画出现。还有，在渲染阵列时，动画仍然无法正常工作，但如果我在react developer工具中切换“in”道具，我可以看到动画。因此，我想我弹出div的想法是有缺陷的，我不得不用另一种方式来处理它。终于让它起作用了。从中吸取的经验教训cstranition组件应该已经在DOM中了，然后我们在其中渲染一个数组。如果我们试图用数组来渲染cstranition组件..不起作用。我接受了@Ross Allen的答案，认为是正确的回答。但对于像我这样的未来学习者，我想补充一点，如果你开始使用网页css加载器，并尝试在CSTranslation中使用类名，别忘了在index.html中链接你的样式表，我想为什么我的类没有像以前那样出现，并且疯狂地盯着屏幕看了好几个小时，希望动画出现。另外，在渲染数组时动画仍然不起作用，但是如果我在react developer tools中切换“in”道具，我可以看到动画。所以，我想我的弹出div的想法是有缺陷的，我必须以不同的方式来处理它。终于让它起作用了。从中吸取的经验教训CSTransition组件应该已经在DOM中，然后我们在其中渲染一个数组。如果我们尝试用数组来渲染CSTransition组件，那么…就行不通了。

          <select  value = {this.props.selected_year? 
          this.props.selected_year:"0"} onChange = {this.onSelectYear}>
                <option value = "0" >Select Year</option>
                <option value = "2016">2015-2016</option>
                <option value = "2017">2016-2017</option>
                <option value = "2018">2017-2018</option>
            </select>