从props.object在桌子上反应显示道具

时间:2018-12-05 15:33:34

标签: javascript reactjs

我在反应中有一个传递的组件,因此道具中的数据是

<Mycomponent names={[{name: 'peter'},{name: 'pan'}]} />

然后我有一个具有表的组件,我想在其中显示数据

这里是组件

import React from 'react';

const Mycomponent = (props) => <div>

    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{ props.names }</td>
            </tr>
        </tbody>
    </table>
</div>;

export default Mycomponent;

如何在<tr><td>{props.names.name}</td></tr>中循环显示每个名称?

1 个答案:

答案 0 :(得分:3)

<tbody>
  {
     props.names.map( ({name}, i) => <tr key={i}><td>{ name }</td></tr> )
  }
</tbody>

将遍历所有props.names并为每个props.name返回一个tr