Блог

Главная - Вопросы по программированию - Цикл по всему Div в React TypeScript

Цикл по всему Div в React TypeScript

#reactjs #typescript

#reactjs #typescript

Вопрос:

Я хочу отображать загрузочную карту несколько раз динамически в React с использованием TypeScript. То, что я сделал, было в функциональном компоненте, я обернул возврат в цикл For, но это не работает. Если я делаю это неправильно, можете ли вы предложить другие способы перебора всего функционального компонента в react, чтобы показать его несколько раз?

 Error in Index.tsx :
'Body' cannot be used as a JSX component.
  Its return type 'Element | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'

Body.tsx

 import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

function Body() {
    var arr=["one", "two", "three", "four"];
    for (let index = 0; index < arr.length; index  ) {
        return (
            <div className="container-fluid col-7 ">
            <br/>
            
                                <div className="card shadow p-3 mb-5 bg-white rounded">
                                <div className="card-body">
                                    <div className="row mb-1">
                                        <div className=" text-styles">Q</div>
                                        <div className="col-11 text-styles pr-n15">Why is good UI design so hard for some Developers? How to Improve this some content?</div>
                                    </div>
                                    <br/>
                                    <div className="row mt-n4">
                                        <div className="col-12">
                                            <p><span className="text-style-grey ml-3">#Finance | Lodging amp; Food Services | may 15, 5.56 PM</span></p>
                                            <ol className="steps">
                                                <li className="step1 current"><span>Submitted</span></li>
                                                <li className="step2"><span>.</span></li>
                                                <li className="step3"><span>.</span></li>
                                                <li className="step4"><span>.</span></li>
                                                <li className="step4"><span>.</span></li>
                                              </ol>
                                        </div>  
                                        <hr/>
                                    </div> 
                                    
                                    <div className="row mb-n4">
                                        <div className="col-11"></div>
                                        <div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
                                    </div>
                                </div>
                            </div>
            
            
            </div>                
      );   
    }  
}

export default Body;

Index.tsx

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Body from './Body';
import Header from './Header';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import Sidebars from './Sidebars';

ReactDOM.render(
  <React.StrictMode>
    <Header />
    <Body />
    {/* <Sidebars /> */}

  </React.StrictMode>,
  document.getElementById('root')
);


serviceWorker.unregister();

Ответ №1:

Используйте функцию map вместо цикла for

           return (
            <> {["one", "two", "three", "four"].map((item,i)=>
                <div className="container-fluid col-7" key={i}>
                  {item}
                 <br/>
                <div className="card shadow p-3 mb-5 bg-white rounded">
                 <div className="card-body">
                  <div className="row mb-1">
                   <div className=" text-styles">Q</div>
                    <div className="col-11 text-styles pr-n15">
                    Why is good UI design so hard for some Developers? 
                    How to Improve this some content?</div>
                    </div>
                    <br/>
                    <div className="row mt-n4">
                    <div className="col-12">
                    <p><span className="text-style-grey ml-3">
                      #Finance | Lodging amp; Food Services | 
                      may 15, 5.56 PM</span></p>
                    <ol className="steps">
                     <li className="step1 current"><span>Submitted</span></li>
                     <li className="step2"><span>.</span></li>
                     <li className="step3"><span>.</span></li>
                     <li className="step4"><span>.</span></li>
                     <li className="step4"><span>.</span></li>
                    </ol>
                     </div>  
                    <hr/>
                    </div> 
                                        
                    <div className="row mb-n4">
                    <div className="col-11"></div>
                    <div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
                    </div>
                    </div>
                    </div>
                </div>   
                )}
            </>             
          );

Комментарии:

1. У меня также есть боковые панели для отображения только один раз, и если я добавлю этот код в это, он будет продолжать цикл

Ответ №2:

Я создал массив, в который я вставил HTML-код n раз, а затем отобразил строку в теле возвращаемой функции.tsx

 import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

function Body() {
    var rows = [];
    for (var i = 0; i < 3; i  ) {
        rows.push(<div className="container-fluid col-7 mt-2 ">
        
        
                            <div className="card shadow p-3 mb-5 bg-white rounded">
                            <div className="card-body">
                                <div className="row mb-1">
                                    <div className=" text-styles">Q</div>
                                    <div className="col-11 text-styles pr-n15">Why is good UI design so hard for some Developers? How to Improve this some content?</div>
                                </div>
                                <br/>
                                <div className="row mt-n4">
                                    <div className="col-12">
                                        <p><span className="text-style-grey ml-3">#Finance | Lodging amp; Food Services | may 15, 5.56 PM</span></p>
                                        <ol className="steps">
                                            <li className="step1 current"><span>Submitted</span></li>
                                            <li className="step2"><span>.</span></li>
                                            <li className="step3"><span>.</span></li>
                                            <li className="step4"><span>.</span></li>
                                            <li className="step4"><span>.</span></li>
                                          </ol>
                                    </div>  
                                    <hr/>
                                </div> 
                                
                                <div className="row mb-n4">
                                    <div className="col-11"></div>
                                    <div className="col-1"><i className="fa fa-ellipsis-h"></i></div>
                                </div>
                            </div>
                        </div>
        
        
        </div>   );
    } 
        return (
               <div>{rows}</div>          
      );   
  
}

export default Body;