Использование l oop внутри функционального компонента для строки - PullRequest
Новая
       154

Использование l oop внутри функционального компонента для строки

0 голосов
/ 04 августа 2020

Я пытаюсь динамически создать поле для количества слов в строке в функциональном компоненте. 

import React from "react";

import "./guessBox.styles.scss";

const Guessbox = ({  wordLength }) => {
    let counter = wordLength
  return (
       <div className='guess-box-container'>
           {while(counter >0)(
               <div className='word-box'></div>
               {counter = counter -1}
           ) }

       </div>
    }
  );
};

export default Guessbox;

Но я получаю следующую ошибку в процессе. 

./src/Components/guessBox/guessBox.component.jsx
  Line 9:13:  Parsing error: Unexpected token

   7 |   return (
   8 |        <div className='guess-box-container'>
>  9 |            {while(counter >0)(
     |             ^
  10 |                <div className='word-box'></div>
  11 |                {counter = counter -1}
  12 |            ) }

Как правильно разместить oop внутри функционального компонента?

1 Ответ

0 голосов
/ 04 августа 2020

Лучший способ, который я предлагаю, - это l oop через карту массива 

import React from "react";

import "./guessBox.styles.scss";

const Guessbox = ({  wordLength }) => {

  const words = ["Your","Word","List"] // you have have a complex any complex object arrays based on your data and needs;
  
  return (
       <div className='guess-box-container'>
         {words.map((word,index)=>{
          return <renderWordBox word={word}  />
         })}
       </div> 
  )



const renderWordBox = (word) => {
  return  <div className='word-box'>{word}</div>
}

export default Guessbox;

на основе вашего кода 

import React from "react";

import "./guessBox.styles.scss";

const Guessbox = ({  wordLength }) => {
    let counter = wordLength
  return (
       <div className='guess-box-container'>
          {renderBox(counter)}    
       </div> 
    }
  );
};


const renderBox = (counter) => {
  while (counter > 0) {
    counter = counter -1
    return  <div key={counter} className='word-box'/>
  }
}

export default Guessbox;

с использованием For l oop

const renderBox = (counter) => {
  for (i = 0; i <counter ; i++) {
   return  <div key={i} className='word-box'/>
  }
}
...