这是我父组件的渲染函数:

  render() { 
    const users = [ 
      'tom': { 
        phone: '123', 
        email: 'hotmail' 
      }, 
      'rob': { 
        phone: '321', 
        email: 'yahoo' 
      }, 
      'bob': { 
        phone: '333', 
        email: 'gmail' 
      }, 
    ]; 
 
    const list = users.map((user) => 
      (<User 
        name={user} 
        phone={users.phone} 
        email={users.email} 
      />), 
    ); 
 
    return <ul>{list}</ul>; 
  } 

输出显示如下:

这是子组件的渲染函数:

  render() { 
    const { 
      name, 
      phone, 
      email, 
    } = this.props; 
 
    const info = [name, phone, email]; 
 
    const item = info.map((index) => ( 
      <li key={index}> 
        { index } 
      </li> 
    )); 
 
    return item; 
  } 

如何让它与电话号码和电子邮件一起显示？不确定我做错了什么。谢谢。

请您参考如下方法:

起初这不是有效的 javascript:

const users = [ 
  'tom': { 
    phone: '123', 
    email: 'hotmail' 
  }, 
  // ... 
]; 

您应该定义一个数组或一个对象。假设您的 users 是一个对象字面量:

const users = { 
  'tom': { 
    phone: '123', 
    email: 'hotmail' 
  }, 
  // ... 
}; 

然后你可以遍历entries对象的:

const list = Object.entries(users).map(([name, info]) => 
  (<User 
    name={name} 
    phone={info.phone} 
    email={info.email} 
  />) 
); 

但是，并非所有浏览器都支持 Object.entries()，请检查它是否适用于您的环境。