在react js中使用语义ui的"ui grid"class在多列中显示内容的问题

Question

下面是使用语义 ui 类的组件

import React from 'react'

class Gridview extends React.Component{
   render(){
     return(
       <div>
         <div class="ui grid">
          <div class ="column">
           <div class ="ui segment">
             {this.props.data.id}<br/>
             {this.props.data.name}<br/>
             {this.props.data.price}<br/>
           </div>
          </div>
         </div>
      </div>
     )
   }
}

export default Gridview

下面是上面的组件用来映射内容的组件。但是当显示在 UI 时，它出现在一列而不是多列：

import React, { Component } from 'react';
import Gridview from './Gridview'

class Product extends Component{
    constructor(){
      super();
      this.state = {  
         data:[
          {
           "id":1,
           "name":"Watch",
           "price":250
          },
          {
           "id":2,
           "name":"Wine",
           "price":252
          },
          {
           "id":3,
           "name":"Mobile",
           "price":289
          }
        ]
      }
    }
    render(){
       return(
        <div>
          {this.state.data.map((item) =>  <Gridview data ={item} />)}  
        </div>
       )
    }
}

export default Product

Answer 1

是的。它将在 1 列中显示您的数据，因为您只添加了 1 列，

<div class="ui grid">
    <div class="column">
        <div class="ui segment">
            {this.props.data.id}<br />
            {this.props.data.name}<br />
            {this.props.data.price}<br />
        </div>
    </div>
</div>

如果你想要 3 column grid 那么你必须添加 3 div with class column with the wrapper row div,

<div className="three column row">
    <div className="column"> {this.props.data.id}</div>
    <div className="column"> {this.props.data.name}</div>
    <div className="column"> {this.props.data.price}</div>
</div>

Demo

您可以参考Grid这里。

注意： 在 React 中我们使用 className.

而不是 class

更新

对于要求，

我有一个数据列表，其中包含参数 ID、名称和 price.I 需要该列表跨越多个列而不是 individual 参数

您需要更改您的父组件结构。

<div className="ui grid">
    <div className="three column row">
        {this.state.data.map((item) =>  <Gridview data ={item} />)}
    </div>
</div>

在 Gridview 组件中，您应该只有 column,

<div className="column"> 
   {this.props.data.id} <br/> 
   {this.props.data.name} <br/>
   {this.props.data.price} 
</div>

Demo

在react js中使用语义ui的"ui grid"class在多列中显示内容的问题

Problem with displaying contents in multiple columns using "ui grid" class of semantic ui in react js

reactjs

semantic-ui