我想在一段时间后渲染我的 ChatBubble 组件。 但它不会返回我的组件。 相反,它以字符串形式返回数字 2 和 3。
const Conversation = ({data}) => {
const { messages } = data;
return (
<div>
{
messages.map(data => {
return setTimeout(() => {
return <ChatBubble key={uniqid()} data={data}/>
}, data.delay);
})
}
</div>
);
}
export default Conversation;
最佳答案
原因 setTimeout
返回计时器的 id。你不能只是返回一些东西来使用react并期望一些魔法发生。相反,您可能需要像这样的有状态组件:
class Conversation extends React.Component {
constructor(props) {
super(props);
this.state = { messages: [] };
}
render() {
return this.state.messages.map(data => (<ChatBubble {...data} />));
}
componentDidMount() {
const {messages, delay} = this.props.data;
this.interval = setInterval(() => {
this.setState(prev => ({ messages: prev.messages.concat(messages.shift()) }));
if(!messages.length) clearInterval(this.interval);
}, delay);
}
componentWillUnmount() {
clearInterval(this.interval);
}
}
关于javascript - ReactJS:setTimeout 无法在 map 内工作来渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50746643/