材料设计用手风琴和对话框元件

Question

是否有任何与我的环境兼容的手风琴和模态对话框组件可供使用：

谷歌的材料设计Lite版本1.06

Facebook的ReactJS 0.14.2

微软的TypeScript和Visual 2015 (用于打字稿捆绑)

我试图避免JavaScript库膨胀和材料设计Lite是缺少这些必要的小部件。我不使用Node.js，因为我是在Windows平台上，所以资料界面不是一种选择。MaterializeCSS膨胀了我的Visual项目，使它变得非常缓慢和不可用。

Answer 1

更新2016年9月28日

现在似乎有了一个开源库来执行以下操作：https://github.com/fiffty/react-treeview-mui。

自实现

这个答案作为一个例子，手风琴下拉建造使用的反应，虽然没有风格的材料设计。你得自己去做。

此设置需要父>子对象/数组的层次结构对象。这个基类应该能够很好地处理非常深的深度。它使用递归来设置它的结构。我还将使用ES6语法作为首选项，因为它帮助我更容易地设置递归。

手风琴班：

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