REACT JS - инкремент компонента имя_класса? - PullRequest
Новая
       15

REACT JS - инкремент компонента имя_класса?

0 голосов
/ 23 апреля 2020

есть только вопрос, возможно ли увеличить className в React JS ???

, чтобы сделать что-то подобное: 

/* in first file */
const rowCount = 68;

class PhotosItem extends Component {
  constructor() {
    super();
    this.list = Array(rowCount).fill().map((val, idx) => {
      return {
        value : 0
      }
    });
  }

  render() {
    return (
      <>
        {this.list.map(this.renderRow)}
      </>
    );
  }

  renderRow(item) {
    return (
      <article class="photo__item">
        <PhotosFigure />
      </article>
    );
  }
}

export default PhotosItem;

/* in other file */
class PhotosFigure extends React.Component{
  render (){
    return (
     <>
       <div className={`figure photo_{* HERE AN INCREMENT *}`}></div>
     </>
     );
  }
}

export default PhotosFigure;

Я хочу сделать такой рендер: 

<article class="photo__item">
  <div class="figure photo_1"></div>
</article>

<article class="photo__item">
  <div class="figure photo_2"></div>
</article>

[...]

<article class="photo__item">
  <div class="figure photo_68"></div>
</article>

У вас есть ответ для меня? или лучший способ сделать это?

спасибо.

(я француз, поэтому мне очень жаль, если я сделал ошибку в Engli sh)

1 Ответ

0 голосов
/ 23 апреля 2020

Второй параметр - это индекс массива для функции карты. Таким образом, вы можете изменить функцию renderRow на эту и передать индекс как реквизит. 

  renderRow(item, index) {
    return (
      <article class="photo__item">
        <PhotosFigure index={index+1} />
      </article>
    );
  }

Затем внутри вашего компонента PhotosFigure вы можете получить индекс как реквизит и применить стили к своему классу, например: это: 

class PhotosFigure extends React.Component{
  render (){
    return (
     <>
       <div className={`figure photo_${this.props.index}`}></div>
     </>
     );
  }
}
...