如何在React组件中重复两个元素

Question

I am using semantic ui and I need to build an accordion component. So this is what I come up with, but this doesn't work as the usage of .title and .content is wrong. How should this be done correct?

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

Update

The result should be like

<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

You can return only one component from a function.

In your case the map is a wrong choice. Try this in your render function:

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

Answer 2

It's invalid syntax to return two components in any part of the code. The issue is this snippet:

...

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

...

However, you should be able to get them to render next to each other by returning an array:

...

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

...