javascript - 将 json 中的 json 显示为连续并排的 2 个立方体，而不是列表

Question

我有一个 json 项目，里面有一个没有键的数组，如下所示:

"id": "81,
"title": " Web Developer",
"creationTime": 1542111235544,
"labels": ["Corvid", "Api"]

其中标签是数组。

我想将它显示为连续的 2 个立方体，但我现在不知道如何，我用 map 迭代它，而是它的立方体列表。

这是我的标签数组代码:

<ul className='labels'>
    {ticket.labels.map(s => (<li > 
        {<button style={{background:'#e6ffe6',border: '0px solid', }}> {s } </button>} 
        </li>))}
         </ul>

Here is what I want

here what I get now

Answer 1

您实际上需要为此编写 CSS。您的代码对于 react.js JSX 似乎是正确的。您可以尝试更改 CSS，如下所示，用于普通 HTML:

ul {
  list-style-type: none
}
ul li {
  display: inline;
}

ul li button {
  background-color: #deeffc;
  border: 1px solid #d3e9fb;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 15px;
  color: #636574;
  margin-left: 10px;
}

<ul>
  <li><button>Corvid</button></li>
  <li><button>Api</button></li>
</ul>

这是您正在寻找的运行代码:

class Example extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       ticket: {
        "id": "81",
        "title": " Web Developer",
        "creationTime": 1542111235544,
        "labels": ["Corvid", "Api"]
       }
     }
   }
  render() {
    let {ticket} = this.state;
    return(
       <div>
        <ul className='labels'>
    {ticket.labels.map(s => (<li> 
        {<button className='ul-btn'> {s } </button>} 
        </li>))}
         </ul>
       </div>
    );
  }
}

ReactDOM.render(
  <Example/>,
  document.getElementById("react")
);

ul {
  list-style-type: none
}
ul li {
  display: inline;
}

.ul-btn {
  background-color: #e6ffe6;
  border: 0px solid;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 15px;
  color: #636574;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.1.0/react-dom.min.js"></script>
<div id="react"></div>