如何循环语义ui反应？(how to loop in semantic ui react?)

如何循环语义ui反应？(how to loop in semantic ui react?)

我正在学习反应。 对于CSS我使用语义 - 用户反应。 我正在尝试使用文档创建一个选项卡： https://react.semantic-ui.com/modules/tab ： 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> } ) ) } ]

我在哪里做错了？

I am learning react. For css I am using semantic-ui-react. I am trying to create a tab using the documentation:https://react.semantic-ui.com/modules/tab. I understand how it works now I want to generate dynamic tabs according to user requirements. Suppose that I have an object like this:

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

I want to generate dynamic tabs based on this. My code is this

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

Where I am doing wrong?

最满意答案

根据文档，您可以执行以下操作。 看演示 ：

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

As per documentation you can do the following. see the 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> );