Material Design Lite 的手风琴和对话框组件

Question

是否有任何手风琴和模态对话框组件可用并且实际工作与我的环境兼容：

Google 的 Material Design Lite 版本 1.06
Facebook 的 ReactJS 0.14.2
Microsoft 的 TypeScript 和 Visual Studio 2015（用于 typescript 捆绑）

我正在努力避免 JavaScript 库膨胀，并且 Material Design Lite 缺少这些基本的小部件。我没有使用 Node.js，因为我在 Windows 平台上，所以 Material-UI 不是一个选项。 MaterializeCSS 使我的 Visual Studio 项目变得非常缓慢且无法使用。

Answer 1

2016 年 9 月 28 日更新

看起来现在有一个 open-source 库可以做到这一点：https://github.com/fiffty/react-treeview-mui

自行实施

此答案作为使用 React 构建的 Accordion 下拉列表的示例，但未采用 Material Design 样式。你需要自己做。

此设置需要父 > 子 objects/arrays 的层次结构对象。这个基地 class 应该能够很好地处理非常深的深度。它对其结构设置使用递归。我还将优先使用 ES6 语法，因为它有助于我更轻松地设置递归。

手风琴Class：

// Accordian Class
// Dynamic/Recursive
// a parent>child>child... relationship is required
// the whole object can be named however you like,
// but each child object needs to be identified as "children"
class Accordian extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openLevelRow: "", // this is the current open level row in an accordian (starts out with none being open)
      selfLevelObject: props.newLevel // the current level object containing all rows and their data/children
    };
  }

  // This is our toggle open/close method
  // if row is already open, close it
  // uniqueSelector is unique per row, and also a key
  // in the selfLevelObject (could be a name, id)
  toggleOpenClose(uniqueSelector) {
    // simple ternary assignment
    this.setState({
      openLevelRow: this.state.openLevelRow != uniqueSelector ? uniqueSelector : ""
    });
  }

  render () {  
    // deconstruct assignment from state
    const { selfLevelObject, openLevelRow } = this.state

    return (
      <div>
          {selfLevelObject.map((row, i) =>
              {/* Collectively where all children of the same hierchy level are listed*/}
              <div className="accordian-hold-self-level" key={i} >
                {/* This is an individual collapsable Row */}
                <div onClick={this.toggleOpenClose.bind(this, row.uniqueSelector)} className="accordian-title-row">
                  <p className='accordian-title'> {row.title}</p>
                </div>
                {/* 
                    When iterating the list, find out if a row has been opened
                */}
                {this.state.openLevelRow != row.uniqueSelector ? <span></span> : 
                    /* 
                      This code block is called if the current row is opened
                      now we to need to find out if there are children,
                      if not, then we are at the bottom, do what ever 
                      you'd like with the bottom row
                    */
                    selfLevelObject[uniqueSelector].children != undefined ? 
                      <Accordian newLevel={selfLevelObject[uniqueSelector].children} /> 
                      : // else
                    // TODO - whatever you want with bottom row
                }
              </div> 
          )}
        </div>
    );
  }
}

Accordian.propTypes = {
    newLevel: React.PropTypes.object
}

Material Design Lite 的手风琴和对话框组件

Accordion and Dialog components for Material Design Lite

typescript

reactjs

material-design-lite