代码之家 › 专栏 › 技术社区 › user8934737

如何在语义ui反应中循环?

semantic-ui-react semantic-ui reactjs javascript

user8934737 · 技术社区 · 7 年前

我正在学习反应。对于css,我使用语义ui react。我正在尝试使用文档创建选项卡: https://react.semantic-ui.com/modules/tab . 我现在了解了它的工作原理,我想根据用户需求生成动态选项卡。假设我有这样一个对象:

[{name: "10jan", key: "10jan"}, 
 {name: "12jan", key: "12jan"},
 {name: "14jan", key: "14jan"}]

我想在此基础上生成动态选项卡。我的代码是

const panes = [
    { dates.map((date) => (
        return (
          menuItem:{date.name},
          render(){
            <div>Test</div>
          }
        )
      ) }
    ]

我哪里做错了?

2 回复 | 直到 7 年前

Sam R. chikka.anddev 7 年前

根据文档,您可以执行以下操作。请参见 demo :

import 'semantic-ui-css/semantic.min.css';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Tab } from 'semantic-ui-react';

const data = [
  { name: "10jan", key: "10jan" }, 
  { name: "12jan", key: "12jan" },
  { name: "14jan", key: "14jan" },
 ];

const panes = data.map(d => ({
  menuItem: d.name,
  render: () => <Tab.Pane> { d.key }</Tab.Pane>
}));

const App = () => (
  <div>
    <Tab panes={ panes } />
  </div>
);

th3g3ntl3m3n 6 年前

state = {
  dataArray:[{name: "10jan", key: "10jan"}, 
 {name: "12jan", key: "12jan"},
 {name: "14jan", key: "14jan"}]
}

renderItems() {
  const {dataArray} = this.state
  return dataArray.map((item,i) => <div key={i}>{item.name}</div>)
}

render() {
  return (
    <div>
       {this.renderItems()}
    </div>
  )
}

我们不会一次又一次地使用渲染方法。这是一种可以渲染动态视图的方法

推荐文章

MachoBoy · 如何使用redux子空间重用具有相同动作的reducer

7 年前

merrilj · Reactjs-在动态元素渲染中向输入添加ref

7 年前

DuckQueen · 如何为react重新创建带有语义ui的自动折叠菜单?

7 年前

Tzvetlin Velev · 如何使用语义的React表组件从表行单击中获取数据

7 年前

DuckQueen · 如何在JavaScript中创建嵌套菜单?

7 年前

Dan · 如何设置语义UI下拉列表大小以匹配按钮等

7 年前

amir · 使用javascript更改图标标记

7 年前

rimraf · 从语义用户界面反应下拉菜单中删除插入符号

7 年前

Tyler Chong · 有没有办法通过语义用户界面获得动态图标?

7 年前

stevenlacerda · 我无法在语义使用react中关闭模式和调光器

7 年前