[英]How to re-render a react component after returning something in a function?
I'm creating a react app with a method to draw some arrows among divs.我正在创建一个反应应用程序,其方法是在 div 之间绘制一些箭头。 The function doesn't produce arrows right away returns the JSX but just after I manually re-render the DOM by scrolling the page or do a route change .
function 不会立即生成箭头返回 JSX,但就在我通过滚动页面或进行路由更改手动重新渲染 DOM 之后。 How can I force render the DOM after the return of the function?
如何在 function 返回后强制渲染 DOM?
drawArrows = () => {
const questionsList = this.state.questionsData;
return questionsList.map(each =>
<Arrow
key={each.order}
fromSelector={`#option${each.order}`}
fromSide={'right'}
toSelector={`#q${each.order}`}
toSide={'left'}
color={'#ff6b00'}
stroke={3}
/>
);
}
render (){
return(
...code
{this.drawArrows()}
)
}
you can do it easy with functional Component with useState and useEffect您可以使用带有 useState 和 useEffect 的功能组件轻松完成
import { useState } from 'react';
const ComponentName = () => {
const [arow, setArow] = useState();
const [questionsData, setQuestionsData] = useState([]);
const drawArrows = () => questionsData.map(each =>
<Arrow
key={each.order}
fromSelector={`#option${each.order}`}
fromSide={'right'}
toSelector={`#q${each.order}`}
toSide={'left'}
color={'#ff6b00'}
stroke={3}
/>
);
useEffect(() => {
setArow(drawArrows())
}, [])
return (
{ arow }
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.