如何将“d”渲染到下面的数组?
const App = () => (
<div style={styles}>
{['a', 'b', 'c'].map((o, i) => {
return (<div>{o}</div>)
}
)}
</div>
);
说我将把 ['a', 'b', 'c']
分配给 const x
如何在 之后使用 map 并渲染新元素c
?我可以获得最后一个元素,例如
{
if(i === x.length - 1) { return('d') }
}
但是c会消失,如何创建第4个元素?
最佳答案
您可以从 map 回调中返回数组中的两个项目:
const x = ['a', 'b', 'c'];
const App = () => (
<div>
{x.map((o, i) => {
if(i === x.length - 1) {
return [
<div key={i}>{o}</div>,
<div key={i + 1}>d</div>
];
}
return (<div key={i}>{o}</div>)
}
)}
</div>
);
ReactDOM.render(
<App />,
app
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
但是,由于您总是在末尾添加 d,因此您可以将标记粘贴在循环后面:
const x = ['a', 'b', 'c'];
const App = () => (
<div>
{x.map((o, i) => {
return (<div key={i}>{o}</div>)
}
)}
<div>d</div>
</div>
);
ReactDOM.render(
<App />,
app
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
关于javascript - 在数组的最后一个元素之后将额外的元素注入(inject)到 jsx 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46580458/