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

Question

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

[{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>
          }
        )
      ) }
    ]

我哪里做错了？

Answer 1

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>
  )
}

我们不会一次又一次地使用 render 方法。这是一种呈现动态视图的方式

Answer 2

根据文档，您可以执行以下操作。见 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>
);

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

how to loop in semantic ui react?

javascript

reactjs

semantic-ui

semantic-ui-react