ReactJS - создание динамического списка

#javascript #reactjs

Вопрос:

Я создаю карточную игру. У меня есть эта база данных json:

 {
  "characters": [   
    {    
      "name": "Character1",
      "punch":12,
      "kick":12,
      "special":15,
      "image":"character1"

    },
    {    
      "name": "Character2",
      "punch":13,
      "kick":11,
      "special":15,
      "image":"character2"  
    },         

    {   
      "name": "Character3",
      "punch":20,
      "kick":19,
      "special":10,
      "image":"character3"   
    }
  ]
}

У меня есть этот родительский компонент, который извлекает данные json для передачи дочернему компоненту. Данные успешно извлечены.

 import React, { Component } from 'react'
import Player from './Player'

var data = require('./db.json');

class Stage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      characters: []
    }
  }

  componentDidMount() {
    this.setState({
      characters: data.characters
    })  
  }

  render() {
    return (

      <div className="stage">
      {console.log(this.state.characters)}
        <Player data={this.state.characters}/>
        <Player data={this.state.characters}/>
      </div>
    )
  }
}


export default Stage

Теперь я хочу отобразить каждую карточку для каждого символа внутри этого компонента в динамическом режиме <li> . Например, у меня есть 3 символа, поэтому я хочу отобразить 3 карточки. Каждый из них соответствует символу. Как я могу это сделать? Я хочу передать свойства для <Card> компонента в

 import React from 'react'
import Card from './Card'   

const Player = (props) => { 
  return (
    <div className="player">     
      <Card/>  
    </div>
  )
}


export default Player

1. хорошо, так в чем проблема?

2. Я не знаю, как отобразить динамический html-список, каждый из которых содержит символ, на карточке

3. смотрите второй компонент

4. в качестве хорошей практики и этикета постарайтесь упомянуть, что вы пробовали перед публикацией, сформулируйте свой вопрос в заголовках требований и формулировок проблем. Просто предложение 🙂

Ответ №1:

Для этого вы хотите использовать .map() . По сути, вы берете массив и возвращаете набор компонентов react из этого массива. Например:

 const Player = ({ data }) => { 
  return (
    <div className="player">
      {data.map((character, i) => (     
        <Card key={i} name{character.name}/>  
      ))}
    </div>
  )
}

Здесь я передал name ключ в каждую карточку, но вы можете передать все, что хотите (включая весь character объект, если это имеет смысл).

Кроме того, я бы переименовал data в characters , поскольку это имеет больше смысла. И я бы установил значение prop по умолчанию как пустой массив.

1. Но я хочу сделать это в карточках, а не в игроках

2. Возможно, вам потребуется уточнить, чего вы пытаетесь достичь в этом случае. Ваши данные в формате json представляют собой массив того, что выглядит как символы. Что представляют карточки? Не могли бы вы предоставить, скажем, свой идеальный вывод дерева компонентов или что-то в этом роде? В любом случае, то, что я привел в качестве своего ответа, должно быть тем, что вам концептуально нужно.

3. каждая карточка представляет каждого персонажа

4. ok обновлено. Как вы можете видеть, ответ по-прежнему концептуально тот же.

5. пожалуйста, не забудьте key=[i] для дочернего элемента card.

Ответ №2:

Просто используйте функцию .map() для перебора каждого элемента массива.

.map()

   {data.map((item, i) => (     
    <Card key={i} name={item.name}/>  
  ))}