typescript 如何使用反应在两列或更多列中显示地图的结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48848462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show results of a map in two or more columns using react
提问by Nestorzin
I think I have a simple question, but I can't get a solution to do this with react, I would like show results in two columns like:
我想我有一个简单的问题，但我无法通过 react 获得解决方案，我想在两列中显示结果，例如：
item 1 | item 4
item 2 | item 5
item 3 | item 6
I tried verify if array lenght is 0 or new start column, but I can't draw a start div element without draw the end div element
我尝试验证数组长度是否为 0 或新的起始列，但我无法在不绘制结束 div 元素的情况下绘制起始 div 元素
I would like to do something like this:
我想做这样的事情：
render() {
const secondColumnStart = this.props.result.length / 2;
return <div className="row">
{this.props.result.map((item, i) =>
{ (i == 0 || i == secondColumnStart) && <div className="col-md-6"> }
item.value
{ (i == 0 || i == secondColumnStart) && </div> })}
</div>;
}
回答by Bilal Khoukhi
Simply map items as you usually do from one array. With that, use the CSS property "columns" to display them as described in the question above.
只需像通常一样从一个数组映射项目。有了这个，使用 CSS 属性“列”来显示它们，如上述问题中所述。
.container {
columns: 2 auto;
}
回答by RIYAJ KHAN
Assuming two column's, having col-md-6class for row splitting.
假设有两列，具有col-md-6用于行拆分的类。
create stateless component myRow
创建无状态组件 myRow
const myRow = ({index})=>{(<div className="col-md-6">{index}</div>)}
create array for each cols
为每个列创建数组
const col1 = [],col2 = [];
this.props.result.forEach((item, i) => {
if(i%===0){
col1.push(myRow);
}else{
col2.push(myRow);
}
}
return the React element in render.
在渲染中返回 React 元素。
return <div className="row">
{col1}{col2}
</div>;
回答by FuzzyTree
If you always want exactly two columns, then one option is to call maptwice. Once for each half of the array:
如果您总是想要恰好两列，那么一种选择是调用map两次。数组的每一半一次：
const secondColumnStart = Math.floor(this.props.result.length / 2);
return (
<div className="row">
<div className="col-md-6">
{this.props.result.slice(0,secondColumnStart).map(item => item.value)}
</div>
<div className="col-md-6">
{this.props.result.slice(secondColumnStart).map(item => item.value)}
</div>
</div>
);
回答by Rebecca Tay
Will there always be 2 columns, regardless of how many items you have? If there are 5 items, should it display as col A -> 1,2,3. col B -> 4,5? Use CSS to put the two columns side by side.
无论您有多少项目，总是有 2 列吗？如果有 5 个项目，它应该显示为 col A -> 1,2,3。第 B 列 -> 4,5？使用 CSS 将两列并排放置。
var halfwayPoint = Math.ceiling(this.props.result.length / 2)
var columnA = this.props.result.splice(0, halfwayPoint)
var columnB = this.props.result.splice(halfwayPoint)
render () {
return (
<div className='columnA'>
{columnA.map((item, i) => {
return (
<div>{item.value}</div>
)
})
}
</div>
<div className='columnB'>
{columnB.map((item, i) => {
return (
<div>{item.value}</div>
)
})
}
</div>
)
}
回答by Pramod Mali
You can use the following code.
您可以使用以下代码。
const Thingy = props => {
const gridCols = [[],[]];
const result = [10,20,30,40,50,60,70];
result.forEach( ( data,i )=>{
const comp = (
<button value={data}>{data+" "}</button>
);
const colNumber = i % 2;
gridCols[colNumber].push( comp );
} );
return (
<div className="container">
<div className="row">
<div className="col-sm">
{gridCols[0]}
</div>
<div className="col-sm">
{gridCols[1]}
</div>
</div>
</div>
)
};
// Render it
ReactDOM.render(
<Thingy title="I'm the thingy" />,
document.getElementById("react")
);<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="react"></div>