如何使用换行符水平显示reactjs映射循环中的项目列表

Question

我有一个来自reactjs映射函数的项目列表(动态创建的按钮(。我希望它们水平列出，如果需要，还允许将剩余的项目包装到下一行。有人能帮忙吗。下面是我的代码片段。

return( <div>
{ relevantMessages.map(function(thisQuestion){
return 
<p key={thisQuestion.id}>
<button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
{thisQuestion.title}
</button>
</p>
}, this)
}
</div>)

Answer 1

您可以使用css水平对齐。

例如：

return( <div>
{ relevantMessages.map(function(thisQuestion){
return 
<p key={thisQuestion.id} style="display:inline-block;">
<button key={thisQuestion.id} onClick={() => this.sendThisMessage(thisQuestion.question)}> 
{thisQuestion.title}
</button>
</p>
}, this)
}
</div>)

Answer 2

在上面的代码片段中使用span标记而不是p标记解决了我的问题。

Answer 3

React并不是真正的问题，CSS更是如此。

你可能正在寻找的是像柔性盒子这样的东西。查看css技巧，了解如何使用它。

或者尝试flexbox froggy进行游戏化学习：(