在React中为JSX组件添加过渡效果

Question

我想在下面的React组件中单击按钮时添加一个转换效果，但由于这段代码更改了实际的JSX内容，而不是className，我认为这在CSS中无法实现。在这种情况下，如何添加过渡效果？

import React, { useState } from 'react';
import ChatItem from './ChatItem';
import ChatButton from './assets/ChatButton';
import classes from './ChatBot.module.css';
const ChatList = (props) => {
const [selected, setSelected] = useState(props.items[0]);
function handleChangeSelected(item) {
setSelected(item);
}
const questionButtons = props.items.map((item) => {
if (item.id === selected.id) return null;
return (
<ChatButton onClick={handleChangeSelected.bind(null, item)}>
{item.question}
</ChatButton>
);
});
return (
<div className={classes.faq}>
<section className="textbox">
<ChatItem
key={selected.id}
id={selected.id}
question={selected.question}
answer={selected.answer}
/>
</section>
<div className={classes.questions}>{questionButtons}</div>
</div>
);
};
export default ChatList;

Answer 1

使用某种类似库的react转换组是可能的。但我认为，如果它不是一个复杂的动画，那么应用className可能会更容易。然后在按钮上应用转换。如果在这种方式下你可以使用可见性。

<ChatButton className={item.id === selected.id && 'active'} onClick={handleChangeSelected.bind(null, item)}>
{item.question}
</ChatButton>