如何在 React js 中插入数据

Question

我遇到了 React JS 的问题，我想在一行中显示所有数据，而不是在一列中。

我应该在我的代码中更改什么？

工作演示：

https://codesandbox.io/s/nostalgic-wood-9jrib?file=/src/App.js:0-355

反应组件

import React from "react";

export default function App() {
  const names =
    data &&
    data.length &&
    data.map(({ full_name }) => <p key={full_name}>{full_name}</p>);

  return <div className="row">{names}</div>;
}

Answer 1

p ：被用作段落，因此默认情况下它将覆盖整个宽度，除非您使用 css 覆盖

您可以使用，

// if you need more space you can apply class to span and add some padding-mrgin
// as per your need
<span key={full_name}>{full_name} {' '}</span>

代替

<p key={full_name}>{full_name}</p>