Как отобразить вложенный массив с помощью React. js? - PullRequest
Новая
       43

Как отобразить вложенный массив с помощью React. js?

0 голосов
/ 29 января 2020

Я новичок, чтобы реагировать. js, и я наткнулся на предмет, который я не могу обернуть вокруг себя. У меня есть длинный массив элементов, которые я хочу отобразить в двух разных строках, поэтому я беру куски из этого массива и добавляю их во вложенный массив без ключа и таких значений: 

constructor(props) {
        super(props)
        this.state = {
            characters: [["Anakin","Darth Vader","Snoke"], ["Darth Maul", "Yoda", "Luke Skywalker"]],
        }
    }

В функции рендеринга компонента «Персонажи» я использую функцию карты, и я хочу, чтобы каждый массив передавался в компонент «Подмассив»:

Компонент символов 

 render() {
        return (
            <div>
                {this.state.characters.map((item, index )=> <Subarray key={index} title={item}></Subarray>)}
            </div>
        )
    }

А затем в компоненте «Subarray» я хочу добавить элемент html к каждому элементу в этом массиве:

Компонент Subarray 

export class Subarray extends Component {
    render() {
        return (
            <div>
               {this.props.title}
            </div>
        )
    }
}

Я не могу получить каждый элемент массива для обёртывания в элемент div:

Вывод: 

<div><div>AnakinDarth VaderSnoke</div><div>Darth MaulYodaLuke Skywalker</div></div>

Ответы [ 2 ]

2 голосов
/ 29 января 2020

Вы можете сделать это, предполагая, что this.props.title содержит ["Anakin","Darth Vader","Snoke"]: 

export class Subarray extends Component {
    render() {
        return (
           <div>
            {this.props.title.map((each, index) => <div key={index}>{each}</div>)}
           </div>
        )
    }
}
1 голос
/ 29 января 2020

Я думаю, что вы должны изменить Subarray на что-то вроде 

export class Subarray extends Component {
    render() {
        return (
            <div>
               {this.props.title.map((item, index) => {
                  return <div key={index}>{item}</div>
               })}
            </div>
        )
    }
}

, чтобы вы проходили oop через каждый элемент в подмассиве и отображали каждый из них

...