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

Posted 2023-03-07

【中文标题】将 json 中的 json 显示为 2 个并排的立方体，而不是列表

【英文标题】：show json in json as 2 cubes side by side in a row and not as a list

【发布时间】：2020-04-20 10:31:50

【问题描述】：

我有一个 json 项目，里面有一个没有键的数组，像这样：

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

其中的标签是数组。

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

这是我的标签数组代码：

<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

【问题讨论】：

我已经用反应代码更新了答案，现在可以帮助你。

【参考方案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>

【参考方案2】：

因为您使用的是li。

要水平对齐li 元素，请将此样式应用于li。

float: left;

若要移除圆圈图标，请将其应用于ul

list-style-type: none;

或

使用<span>/<label> 而不是<li>。

【讨论】：

你太棒了！谢谢！