gpt4 book ai didi

javascript - React.js+Bootstrap 渲染行

转载 作者:行者123 更新时间:2023-11-30 15:33:49 26 4
gpt4 key购买 nike

我正在使用 bootstrap,我想渲染一行中的 4 列。但是我不知道我会有多少列,所以它应该适用于任意数量的列,而且第一列可以是与其他列不同的 react 组件。

我想要实现的目标:

<div class="row">
<div class="col-md-3 component-type-1">...</div>
<div class="col-md-3 component-type-2">...</div>
<div class="col-md-3 component-type-2">...</div>
<div class="col-md-3 component-type-2">...</div>
</div>
<div class="row">
<div class="col-md-3 component-type-2">...</div>
<div class="col-md-3 component-type-2">...</div>
<div class="col-md-3 component-type-2">...</div>
<div class="col-md-3 component-type-2">...</div>
</div>

我尝试了一些东西,但没有达到我想要的效果..

    import chunk from 'lodash/chunk.js'

class Test extends React.Component {

render() {

let component1=null;
if (this.state.shouldBeComponent1) {
component1=<Component1 key="component1" />;
}

let items = [];
if (component1!=null) items.push(component1);

this.state.dataForComponents2.forEach((data) => {
items.push(<Component2 key={data.ID} />)
});

const rows = chunk(items, 4);

let pageBody=null;
if (items.length>0) {
pageBody=(
rows.map((row) => {
<div className="row">
{
row.map((item) => (
{item}
))
}
</div>})

);
}

return (
<div>
<div className="header">
///Other unreleated code
</div>
{pageBody}

</div>
);
}

最佳答案

您的 pageBody 似乎有问题

试试这个。

    let pageBody= [];
if (items.length>0) {
rows.forEach((row, idx) => {
pageBody.push
(
<div key={idx} className="row">
{row}
</div>
)}
);
}

和例子here

关于javascript - React.js+Bootstrap 渲染行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41886644/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com