Question

目标是在浏览器中显示图片，标题和说明。

数据在数组中

customData.js

import React, {Component} from 'react';

var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},

{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]

module.exports = DATA

这是我的Index.js

class App extends Component {


render() {
    return (
        <div>
            <MuiThemeProvider>
                <AppBarExampleIconButton />
            </MuiThemeProvider>
            <div>
                <Profile name={this.props.profileData.name} imgUrl={this.props.profileData.imgURL} descricao={this.props.profileData.descricao} />
            </div>
        </div>
    );
  }

}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));

这是我的组件profile.js

import React, {Component} from 'react';
import DATA from './customData.js';

var Profile = React.createClass({

render: function(){

    //console.log(DATA);

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
            </div>
        </div>
    )
  }
});

export default Profile

如果我是console.log（DATA），我可以在我的控制台中查看该对象，但现在我不知道如果数据是单个对象，只能在数组中显示DATA。

有人可以帮助我吗？我已经尝试创建一个状态，以免未定义，但我不理解，需要帮助！

谢谢！

Answer 1

这就是你追求的吗？ http://codepen.io/PiotrBerebecki/pen/qaRNKy

var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},

{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]


class App extends React.Component {
  render() {  
    const data = this.props.profileData.map(function(item, index) {
      return (
        <Profile name={item.name} 
                 imgUrl={item.imgURL} 
                 descricao={item.descricao}
                 key={index} />
      );
    }); 

    return (
        <div>
            {data}
        </div>
    );
  }
}


class Profile extends React.Component {
  render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
             </div>
        </div>
    );
  }
}


ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));

React - 循环通过数组 - 未定义的映射

1 个答案: