首頁猿問 React 在 for...

React 在 for 循環中從給定的整數渲染多個按鈕

JavaScript

慕妹3146593 2023-07-06 15:06:49

我正在構建一個進度條，它需要兩個輸入，totalSteps并且activeStep. 我將渲染一些等于總步驟數的圓圈，其中活動步驟為灰色。我有映射對象數組的經驗，但是在這種情況下，我沒有數組，只是給出了一個整數。我正在嘗試編寫一個div在 for 循環中返回 a 的函數，但這不起作用。const ProgressBar = (props) => { const { activeStep, totalSteps } = props; const displayProgressBar = () => { for (let i = 1; i <= totalSteps; i++) { return <div>Hello</div>; } }; return <div className="progressBar">{displayProgressBar()}</div>;};上面的代碼Hello即使totalSteps是3也只渲染一次。有沒有辦法在不創建數組的情況下達到預期的結果？

查看完整描述

4 回答

明月笑刀無情

TA貢獻1828條經驗獲得超4個贊

您的for循環在第一次迭代后終止，因為return立即終止函數調用。您需要將 JSX 元素累積到數組中并使用它。displayProgressBar您也根本不需要該功能。

const ProgressBar = (props) => {

const { activeStep, totalSteps } = props;

const steps = [];

for (let i = 1; i <= totalSteps; i++) {

steps.push(<div>Hello</div>);

}

return (<div className="progressBar">{ steps }</div>);

};

您可能應該active向該activeStep項目添加一個類或其他內容，以便選擇它，steps.push(...)從上面更改為：

steps.push(<div className={ i == activeStep ? "active" : "" }>Hello</div>);

反對回復 2023-07-06

慕虎7371278

TA貢獻1802條經驗獲得超4個贊

您“...具有映射數組的經驗...”那么這應該是小菜一碟；它是完全一樣的。如果問題更多是關于如何獲取數字并將其轉換為數組（我認為是這樣），那么常見的模式是[...Array(5).keys()]. 一旦你有了一個數組，你就可以像平常一樣在 JSX 中映射它。

const ProgressBar = (props) => {

const { activeStep, totalSteps } = props;

const displayProgressBar = () =>

[...Array(totalSteps).keys()].map((step) => <div key={step}>Hello</div>);

return <div className="progressBar">{displayProgressBar()}</div>;

};

不過，內聯數組可能更簡單。

const ProgressBar = (props) => {

const { activeStep, totalSteps } = props;

return (

{[...Array(totalSteps).keys()].map((step) => {

// logic to compare against activeStep

return (

<div key={step}>Hello</div>

))}}

</div>

);

};

反對回復 2023-07-06

HUWWW

TA貢獻1874條經驗獲得超12個贊

您可以為此動態創建一個數組

const ProgressBar = (props) => {

const { activeStep, totalSteps } = props;

const steps = new Array(totalSteps).fill().map((_,index)=>{

const stepIndex = index+1;

const activeClassName = stepIndex === activeStep ? 'active':undefine;

return <div className={activeClassName}>{stepIndex}</div>

});

return <div className="progressBar">{display}</div>;

};

反對回復 2023-07-06

元芳怎么了

TA貢獻1798條經驗獲得超7個贊

好吧，您確實需要一個元素數組，那么創建數組有什么問題呢？

const ProgressBar = (props) => {

const { activeStep, totalSteps } = props;

const steps = (new Array(totalSteps))

.fill(undefined)

.map((step, index) => (

// If the step is active (or past) step, give it a grey background

{index+1}

</div>

));

return <div className="progressBar">{steps}</div>;

};

像這樣的東西將創建一個元素數組并相應地為它們著色

反對回復 2023-07-06

4 回答
0 關注
253 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React 在 for 循環中從給定的整數渲染多個按鈕

React 在 for 循環中從給定的整數渲染多個按鈕

4 回答

添加回答