Javascript 如何渲染数组的单个元素？

在我的React应用程序中，我的变量中有数组，它们被呈现为单个元素。例如，

r:['reply1-1'，'reply1-2']

一起呈现为

reply1-1reply1-2

。我不知道如何

它们，也不知道如何分开

按钮

代码：

类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={currentDialog:0}
}
render（）{
变量对话框=[
{
id:uuid.v4（），
问：“对话1”，
r:[‘答复1-1’、‘答复1-2’]
},
{
id:uuid.v4（），
问：“对话2”，
r:['reply2-1'，'reply2-2']
},
{
id:uuid.v4（），
问：“对话3”，
r:[‘答复3-1’、‘答复3-2’]
},
{
id:uuid.v4（），
问：“对话4”，
r:[‘答复4-1’、‘答复4-2’]
}
]
var replyList=dialogs.map（reply=>{
返回(
{reply.r}
);
});
返回(
{dialogs[this.state.currentDialog].q}



{replyList[this.state.currentDialog]}



{
this.currentDialog减号（）
}}>上
{
这个.currentDialogPlus（）
}}>下一个
)
}
currentDialogPlus（）{
这是我的国家(
{
currentDialog:this.state.currentDialog+1
}
);
}
CurrentDialog减号（）{
这是我的国家(
{
currentDialog:this.state.currentDialog-1
}
);
} 
}
导出默认应用程序；
只需再次调用
map（）
即可分别渲染它们。比如：

var replyList = dialogs.map(reply => {
    return (
        <div>
            {reply.r.map(item => {
                <button type="button">{item}</button>
            })}
        </div>
    );
});

var replyList=dialogs.map（reply=>{
返回(
{reply.r.map（项=>{
{item}
})}
);
});
dialogs是一个数组，您可以使用map函数迭代dialogs中的每个元素。
但是，属性“r”也是一个数组。因此，您还需要一个映射函数。
如果您只是想将值分隔到新行，那么可以为每个值添加一个div标记。像这样的

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      {value}
      </div>
    ); 
  })
 );
});

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      <button>{value}</button>
      </div>
      ); 
    })
  );
});

var replyList = dialogs.map(reply => {
return (reply.r.map(value => <div><button>{value}</button></div>));
});

var replyList=dialogs.map（reply=>{
返回(
reply.r.map（值=>{
返回(
{value}
); 
})
);
});

如果您想为reply.r数组中的每个元素创建一个按钮，可以执行以下操作

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      {value}
      </div>
    ); 
  })
 );
});

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      <button>{value}</button>
      </div>
      ); 
    })
  );
});

var replyList = dialogs.map(reply => {
return (reply.r.map(value => <div><button>{value}</button></div>));
});

var replyList=dialogs.map（reply=>{
返回(
reply.r.map（值=>{
返回(
{value}
); 
})
);
});

您还可以通过这样的方式减少冗长

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      {value}
      </div>
    ); 
  })
 );
});

var replyList = dialogs.map(reply => {
return (
  reply.r.map(value => {
    return (
      <div>
      <button>{value}</button>
      </div>
      ); 
    })
  );
});

var replyList = dialogs.map(reply => {
return (reply.r.map(value => <div><button>{value}</button></div>));
});

var replyList=dialogs.map（reply=>{
返回（reply.r.map（value=>{value}））；
});

但我建议使用return语句，使其更具可读性。
希望这有帮助。
请确保不要忘记添加
键
@HardikModha我为什么需要钥匙？@Przemyslaw.Pszemek react docs会更好地解释它@HardikModha非常感谢。@HardikModha谢谢，但无论如何，在我继续我的项目之前，我决定先学习我是个彻头彻尾的noob