Question

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

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

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

Answer 1

2016年9月28日更新

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

自我实施

这个答案是使用React构建的Accordion下拉列表的一个示例，虽然没有被设计为Material Design。你需要自己做。

此设置需要父级＆gt;的层次结构对象。子对象/数组。这个基类应该能够很好地处理非常深的深度。它使用递归进行结构设置。我还将首选使用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
}

Material Design Lite的{Accordion和Dialog组件

1 个答案: