首頁猿問 React 在 for...

React 在 for 循環(huán)中從給定的整數(shù)渲染多個按鈕

JavaScript

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

我正在構建一個進度條，它需要兩個輸入，totalSteps并且activeStep. 我將渲染一些等于總步驟數(shù)的圓圈，其中活動步驟為灰色。我有映射對象數(shù)組的經(jīng)驗，但是在這種情況下，我沒有數(shù)組，只是給出了一個整數(shù)。我正在嘗試編寫一個div在 for 循環(huán)中返回 a 的函數(shù)，但這不起作用。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也只渲染一次。有沒有辦法在不創(chuàng)建數(shù)組的情況下達到預期的結果？

查看完整描述

4 回答

明月笑刀無情

TA貢獻1828條經(jīng)驗獲得超4個贊

您的for循環(huán)在第一次迭代后終止，因為return立即終止函數(shù)調用。您需要將 JSX 元素累積到數(shù)組中并使用它。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條經(jīng)驗獲得超4個贊

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

};

不過，內聯(lián)數(shù)組可能更簡單。

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條經(jīng)驗獲得超12個贊

您可以為此動態(tài)創(chuàng)建一個數(shù)組

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條經(jīng)驗獲得超7個贊

好吧，您確實需要一個元素數(shù)組，那么創(chuàng)建數(shù)組有什么問題呢？

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>;

};

像這樣的東西將創(chuàng)建一個元素數(shù)組并相應地為它們著色

反對回復 2023-07-06

4 回答
0 關注
269 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

React 在 for 循環(huán)中從給定的整數(shù)渲染多個按鈕

React 在 for 循環(huán)中從給定的整數(shù)渲染多個按鈕

4 回答

添加回答