Question

我正在使用语义ui，我需要构建一个手风琴组件。所以这就是我想出来的，但这不起作用，因为.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

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

在您的情况下，地图是错误的选择。请在渲染功能中尝试此操作：

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

在代码的任何部分返回两个组件的语法无效。问题是这个片段：

...

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

...

但是，你应该能够通过返回一个数组让它们彼此相邻：

...

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

...

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

2 个答案: