Question

我是新手做出反应，我想知道将动作级联到子元素的最佳模式。

特别是，我正在尝试在React.js中构建一个类似于widget的树。树的每个分支都是一个React类，名为＆＃34; CollapsableSection＆＃34;其中包含＆＃39; +＆＃39;或者＆＃39; - ＆＃39;用于折叠或展开该分支的按钮。如果扩展分支，则隐藏子项，否则显示它们。状态存储在state.collapsed中的每个CollapsableSection中。

到目前为止这种方法效果很好，但现在我正在尝试创建两个顶级按钮，名为＆＃34; Expand All＆＃34;或＆＃34;全部折叠＆＃34;这将扩展或折叠树中的所有分支。我考虑过一些不同的方法来完成这个。

方法1：

我可以将一个属性发送到名为forceCollapse的我的CollapsableSection，在点击＆＃34; Collapse All＆＃34;后，将其设置为等于Date.now（）。按钮。然后在CollapsableSection中我还将Date.now（）存储在state.userInteractionTime中，并在每次直接单击+/-按钮时更新它。然后在CollapsableSection的Render方法中，我将基于较大的时间戳而出现崩溃状态。这就是＆＃34;崩溃所有＆＃34;单击按钮，所有孩子都将崩溃，但用户可以在打开的选定分支上重新点击。

方法2：

我可以某种方式使用组件引用来存储对父项的所有子项的引用，然后每当单击“全部展开”时，它将调用所有子项的扩展函数。

作为进一步的考虑，我可能希望将这些expandAll / collapseAll按钮放在我的树的不同级别，它们将级联到它们下面的任何分支。以下是我正在寻找的例子：

Initial Tree:
[++][--]
  [+]Section 1 
  [+]Section 2

After Clicking top level [++] (Expand All):
[++][--]
  [-]Section 1 
     [-]Subsection 1A
        content 1A 
     [-]Subsection 1B
        content 1B
  [-]Section 2
     [-]Subsection 2A
        content 2A part1
        [-]Subsubsection 2AA
           contents 2AA
        content 2A part2
     [-]Subsection 2B
        content 2B

请注意，正如我目前所设置的那样，可以组合树叶和树枝，如第2A小节所示。

以下是我的反应组件的当前代码：

var CollapsableSection = React.createClass({
  getInitialState: function() {
    return {collapsed: JSON.parse(this.props.initialCollapse)};
  },
  handleClick: function(event) {
    this.setState({collapsed: !this.state.collapsed});
  },
  render: function() {
    var headerStyle = {fontSize: '2em', margin: '.67em 0'};
    if (this.props.headerStyle) {headerStyle = this.props.headerStyle;}

    //var text = this.state.liked ? 'like' : 'haven\'t liked';
    var thestyle={display: ((this.state.collapsed)?'none':'block')};
    var thetext=((this.state.collapsed)?'+':'-');
    return (
      <div>
        <div style={headerStyle}>
          <button onClick={this.handleClick} value={thetext}>{thetext}</button>
          {this.props.title}
        </div>
        <div style={thestyle}>
          {this.props.children}
        </div>
      </div>
    );
  }
});

问题：

在React.js中创建我正在寻找的功能的最简洁方法是什么？我宁愿只使用react和vanilla javascript，除非它们是使用其他东西的一个非常令人信服的理由。

React JS操纵子模式

0 个答案: