[英]render a part JSX by another function component - reactJS
I have a function component like that我有一个像这样的 function 组件
function myMainComponent() {
const MyUIA() {
//some calulations about attrs
return (<div><ComponentA {...attrs}></div>)
}
const MyUIB() {
//some calulations about attrs
return (<div><ComponentA {...attrs}></div>)
}
// Way A
/*
return (
<div>
<MyUIA/>
<MyUIB/>
</div>);
*/
// Way B
return (
<div>
{MyUIA()}
{MyUIB()}
</div>);
}
The results of render by WayA and WayB is the same, but in first case there is a flickering WayA 和 WayB 渲染的结果是一样的,但是第一种情况有闪烁
Since as we know every code we write in react is converted into JSX first, then it get rendered so if we see for native method the JSX element is created twice while for JSX it's created only once.因为我们知道我们在 react 中编写的每个代码都会首先转换为 JSX,然后才会被渲染,所以如果我们看到原生方法的 JSX 元素被创建了两次,而 JSX 的元素只创建了一次。 So this is the case one can see the flickering.
所以这是可以看到闪烁的情况。 I hope it helps.
我希望它有所帮助。
function myMainComponent() {
const MyUIA = () => {
return /*#__PURE__*/React.createElement("div", null,/*#__PURE__*/React.createElement(ComponentA, null)); };
const MyUIB = () => {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ComponentA, null));};
// Way A
return /*#__PURE__*/React.createElement("div", null,
/*#__PURE__*/React.createElement(MyUIA, null),
/*#__PURE__*/React.createElement(MyUIB, null));
// Way B
return /*#__PURE__*/React.createElement("div", null, MyUIA(), MyUIB());
}
This might not be relevant to your problem but it is a general tip for all react users that a react component must have only 1 return statement at most这可能与您的问题无关,但它是所有反应用户的一般提示,反应组件最多只能有 1 个返回语句
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.