反射渲染数组

Question

import React from 'react';

//扩展 从'axios'中导入axios;

export default class Player扩展了React.Component {

constructor(){
    super();
    this.state = {
        video:this.vidTitle
    }
}

pid; //playlist ID
vidTitle = []; // Video Title
vidUrl;

componentDidMount(){
    this.getPID();
}

//Get playlist id
getPID(){
    let chanelName = "PiuChePuoiVideo"
    let url = "https://www.googleapis.com/youtube/v3/channels"
    axios.get(url, {
        params: {
            part:'contentDetails',
            forUsername: chanelName,
            key:'AIzaSyDZElwYmtCyvPLJKYO7Yt87EvJcOkyMTDg'
        }
    })
    .then(res => {
        this.pid = res.data.items[0].contentDetails.relatedPlaylists.uploads;
        console.log(this.pid)
        this.getVideoList();
    })
    .catch(err => {
        console.log(err);
  });
}

getVideoList(){
    let url = "https://www.googleapis.com/youtube/v3/playlistItems"



    axios.get(url, {
        params: {
            part:'snippet',
            maxResults: 50,
            playlistId:this.pid,
            key:'AIzaSyDZElwYmtCyvPLJKYO7Yt87EvJcOkyMTDg'
        }
    })
    .then(res => {
        // this.vidTitle = res.data.items.snippet.title;
        res.data.items.forEach((element) => {
            this.vidTitle.push({
               title:element.snippet.title
            });
        });
    })
    .catch(err => {
        console.log(err);
  });
}
render(){
    console.log(this.state.video)
    return (
        <div className="container">
           <div className="row">
               <div className="col-md-3">
                    <div>
                        {this.state.video.map(function(element, i) {
                            return <p>{element.title}</p>
                     })}
                    </div>
                    <h1>test</h1>
               </div>
           </div>
    </div>
    )
}

}

所有我想做的就是用html渲染这个数组，我似乎无法让它工作，你可以帮助我吗

Answer 1

尝试包装从括号中的map函数返回的HTML，这适用于JSFiddle（https://jsfiddle.net/xkbxz4yx/）：

var Hello = React.createClass({

  render: function() {
    return <div>Hello {this.props.items.map(item =>{
        return (<p>{item.name}</p>)
    })}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" items={[{name: 'one'}, {name: 'two'}]} />,
  document.getElementById('container')
);