javascript - 带有 "Progess/Completion bar"的 ReactJS 可折叠元素

Question

我正在努力在 React 中制作一个相对简单的组件。目标是得到接近下图的东西:

在图像中有两个相同类型的组件(我们称它们为面板)，其中的内容可以折叠和展开。理想情况下，面板应该有一个标题组件、一个进度条组件和内容(即单选按钮、文本等)。折叠时，我希望“进度条”变为绿色。我从下面的代码片段开始创建一个进度条，虽然它非常粗糙(其中的一些代码将被放置在其他组件中并在那里进行测试)。我是新来的，所以任何见解或方向将不胜感激!

import React, { Component } from 'react';
import './styles.css';

export default class IconProgressBar extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
        }
    }


    render() {
        return (
            <div className="row">
                <div className="progress-bar">
                    <span className="progress-line"></span>
                <span className="progress-icon"></span>
            </div>
            <div className="step-container">
                <div className="step-header">
                    <span className="col s6"><h3>Header 1</h3></span>
                    <span className="col s6 text-right step-summary">
                            <button className="secondary right edit-button">Edit</button>
                            <span className="current-value right"> . </span>
                        </span>
                    </div>
                    <div className="step-body">
                    </div>
                </div>
            </div>
        );
    }
}

编辑:在任何答案中，我都不太关心样式(可以稍后解决)，即在可折叠和可堆叠元素中的圆圈下面有一条线就足够了:)

Answer 1

除了绑定(bind)和一些样式之外，我已经实现了你的大部分功能。您只需完成样式设置并添加图标和回调以记录用户操作。

在这种情况下，想法很简单，您有一个面板列表，其中包含一个标题和一系列选项。首先，您可以简单地渲染元素，然后在新的 ProgressBar 组件中，保持栏的状态，即单击以切换和更改左侧栏的样式。如果您还有其他问题，请告诉我。

为了简单起见，我将所有内容都放在一个组件中，但如果您想隔离和重用子组件，您可能需要更改它。

https://react-2nhcbe.stackblitz.io