如何使用wrap水平显示reactjs映射循环中的项目列表？

Question

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

[display-attribute-link pa_bolt-width:6mm]

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

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

您可能正在寻找的是诸如flex-box之类的东西。请查看css-tricks，以获取有关如何使用它的良好教程。

或者尝试flexbox-froggy来学习它：）

Answer 3

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