[英]React JSX inner loop rendering
给定一个偶数长度的数组,我试图找到一种使用 React 的干净方法,将数组的一半放在一个 div 标签中,每个元素都应该在一个 span 标签中,另一半也是如此。 例如,给定数字 1 到 6 的数组,呈现的 output 应该是:
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
主要问题是处理 JSX 与 JS 的结合,我不知道如何实现这个结果,因为似乎必须使用一些内部循环并且它会干扰返回的渲染 JSX。
我还需要扩展它以执行类似的功能,将数组拆分为不同数量的<div>
标记,例如 3 个<div>
标记,每个标记有 2 个<span>
标记。
我们如何以干净的方式实现这一目标?
你可以这样做:
const arr = [1, 2, 3, 4, 5, 6];
.....
// Inside some JSX components render method
{[arr.slice(0, arr.length / equalParts),
arr.slice(arr.length / equalParts - 1, arr.length)].map(
(half, index) => (
<div key={`outer_${index}`}>
{half.map((item, index) => (
<span key={`inner_${index}`}>{item}</span>
))}
</div>
),
)}
对于问题的第二部分,您可以将其提取到 function:
const splitAndRender = (arr: number[], equalParts: number) => {
const slices = [];
const innerLength = arr.length / equalParts;
for (let i = 0; i < equalParts; i++) {
slices.push(arr.slice(i * innerLength, (i + 1) * innerLength));
}
return slices.map((half, index) => (
<div key={`outer_${index}`}>
{half.map((item, index) => (
<span key={`inner_${index}`}>{item}</span>
))}
</div>
));
};
并像这样使用 function:
const arr = [1, 2, 3, 4, 5, 6];
.....
{splitAndRender(arr, 3)}
在 React 中需要内联关闭标签所以我发现了这种(不是那么高效)的方式:
const TMP = ({data,splitby}) => { let transformedData = data.reduce((r,v,i)=>{ if (i%splitby) r[r.length-1].push(v) else r.push([v]); return r },[]) return <div> { transformedData.map((v,index)=>( <div key={`div-$index`}> { v.map((s,idx)=> <span key={`div-${index}-span-${idx}`}>{s}</span>) } </div> )) } </div> }; ReactDOM.render( <TMP data={Array.from({length: 25}, (v, i) => i)} splitby={3}/>, document.getElementById("tmp_root") );
div { border: 1px solid tomato; } span { display: block; border:1px solid silver; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="tmp_root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.