javascript - 如何在 react 组件中重复两个元素

Question

我正在使用语义 ui，我需要构建一个 Accordion 组件。这就是我的想法，但这不起作用，因为 .title 和 .content 的使用是错误的。这应该如何正确完成？

import React, { Component } from 'react';

export default class Example extends Component {
    getData() {
        // some data
    }

    render() {
        return (
            <div className="ui styled fluid accordion">
                {
                    this.getData().map((element) => {
                        return (
                            <div className="title">
                                <i className="dropdown icon"></i>
                                { element.title }
                            </div>
                            <div className="content">
                                <ul className="ui list">
                                    <li>Lorem ipsum</li>
                                </ul>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}

更新

结果应该是这样的

<div class="ui accordion">
    <div class="active title">
    </div>
    <div class="active content">
    </div>
    <div class="title">
    </div>
    <div class="content">
    </div>
</div>

Answer 1

您只能从函数返回一个组件。

就您而言， map 是一个错误的选择。在您的渲染函数中尝试一下:

// build the array of all elements
const accordionChildren = [];
this.getData().forEach(element => {
  accordionChildren.push(
    <div className="title">{element.title}</div>,
    <div className="content">{element.content}</div>
  );
});

return (
  <div className="ui styled fluid accordion">
    {accordionChildren}
  </div>
);