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

除绑定和某些样式外，我已经实现了您的大部分功能。您只需完成样式并添加图标和回调即可记录用户操作。

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

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

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

具有“进度/完成栏”的ReactJS可折叠元素

1 个答案: