javascript - 如何使用 es6 (reactjs) 通过索引在项目列表中查找对象

Question

我是 React 和 es6 语法的新手，假设我有一个如下所示的对象列表 (testData.js)

export const favourites=[
    {
        name: 'Jhon Doe',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Micheal Douglas',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Camille la cruz',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'The Rock',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Daniel lacharmante',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    },
    {
        name: 'Alber Weiter',
        avatarUrl:require('../../social_app/test/profilePic/17.jpg')
    }

]

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

假设我已将其导入到一个文件中，例如 test.js，因此要使用我已完成的此列表

    const favouritePersonList =favouritePersonData.map(person=>{
        return <Avatar key={person} avatarurl={person.avatarUrl} style={styles.favouritePersons} height={40} width={40} activity/>
     })

假设创建一个 Avatar 组件列表，并放置所需的 Prop 等...现在我想做的是渲染此列表中的第一个对象/组件。我试过了

render(
        <div>
        {favouritePersonList[0]}
        </div>
)

但是没有成功，有人可以帮助我吗？谢谢

根据要求，请找到完整的头像代码，请注意，这是 react native 代码。

export default class Avatar extends React.Component {
    constructor(props){
        super(props)
        this.state={
            userState : '#1cdb4c'

        }
    }


    componentWillMount(){
        this.props.activity? this.setState({userState:'#1cdb4c'}): this.setState({userState:'#f93434'})
    }

    render() {
        const {height, width, avatarUrl}=this.props
      return (
        <View style={styles.container}>
        <View style={[styles.avatarContainer,{height:height,width:width}]}>
        <Image style={styles.avatarImg} 
        source={avatarUrl}
        
        />
        </View>
        <View style={[styles.userActivity,{height:height, width:width}]}>
        <View style={styles.outer}>
        <View style={[styles.inner,{backgroundColor:this.state.userState}]}/>
        </View>
        </View>
         </View>
      );
    }
  }

Answer 1

这取决于您希望组件如何显示，但您可能会使用大致如下的内容:

render(
  <div>
     {favoritePersonList.map(person => {
       return (
         <div>
           <h1>{person.name}</h1>
           <img src={person.avatarUrl} alt={person.name}/>
         </div>
       )
     })}
  </div>
)