Question

如果我将菜单项标记为突出显示，我会坚持如何告诉我的渲染只填充className（我正在使用className btw）。

有两个限制因素：

某些菜单项是href / nav链接到应用程序的某些部分，而点击它们时必须应用我想要构建我的代码的样式，以支持整个组件能够检查地址它是在并决定菜单项是否应该具有样式或不依赖于它。（通过手动导航（键入/项目到地址栏）而不是单击菜单项，支持用户“打破”应用程序。）
有些菜单项展开，有些则没有，点击链接菜单项或展开下拉列表是应用样式的两个正当理由，请记住在展开其他地方时展开的元素会保持展开状态。

因此，如果您不是最后点击的项目，那么这不仅仅是“失去风格”。

更新（2017年8月23日）：

我从@ taylorc93那里得到了这个，这是向前迈出的一步：

constructor(props) {
    super(props);
    this.state = {
        selected: null;
    };
    this.setSelected = this.setSelected.bind(this);
}

setSelected(row) {
  return () => {
    this.setState({ selected: row });
  }
}

render() {
    var classes = classNames(this.props.className, {
        // if(this.selected)
        'selected': (this.props.selected === this.props.className),
    });
    return (
        <div id="menu">
          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Dropdown 1
          </div>

          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Menu item 2
          </div>

          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Menu item 3
          </div>
        </div>
    );
}

问题是它没有考虑下拉行为（点击一次选择第二次取消选择）所以我在上面写了一下，这就是我所在的地方：

constructor(props) {
    super(props);
    this.state = {
        tttattta: '',
        selected: null,
        dropDownOne: false,
        dropDownTwo: false,
    };
    this.setSelected = this.setSelected.bind(this);
}

setSelected(row) {
    let tttattta = this.state.tttattta;
    let drop1 = this.state.dropDownOne;
    let drop2 = this.state.dropDownTwo;
    if (row === 1) {
        if (drop1) {
            drop1 = false;
        } else {
            drop1 = true;
        }
    } else if (row === 3) {
        if (drop2) {
            drop2 = false;
        } else {
            drop2 = true;
        }
    } else {
        tttattta = row;
    }
    return () => {
        this.setState({ selected: tttattta,
            dropDownOne: drop1,
            dropDownOne: drop2,
        });
    };
}


render() {
    var classes = classNames(this.props.className, {
        // if(this.selected)
        'selected': (this.props.selected === this.props.className),
    });
    return (
        <div id="menu">
          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Dropdown 1
          </div>

          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Menu item 2
          </div>

          <div
            onClick={this.setSelected(1)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === 1,
            })}
          >
            Menu item 3
          </div>
        </div>
    );
}

Answer 1

问题是您在渲染功能中调用了setSelected：

<div className={classes} onClick={this.setSelcted(1)}> Menu item 1</div>

你需要让setSelected返回一个在实际点击项目时可以调用的函数：

setSelected(row){
  return () => {
    // switch statement here
  }
}

更新：

好像你试图找到一种更好的方式来表示所选项目，这很好:)。我建议将所选项目的ID存储在您的州，而不是一系列布尔值。您的课程将如下所示：

class MenuComponent extends Component {

constructor(props) {
    super(props);
    this.state = {
        selected: null;
    };
    this.setSelected = this.setSelected.bind(this);
}

setSelected(row) {
  return () => {
    this.setState({ selected: row });
  }
}

render() {
    var classes = classNames(this.props.className, {
        // if(this.selected)
        'selected': (this.props.selected === this.props.className),
    });
    return (
        <div id="menu">
          <div
            onClick={this.setSelcted(<REPLACE_WITH_ROW_NUM>)}
            className={classNames(this.props.className, {
              'selected': this.state.selected === <REPLACE_WITH_ROW_NUM>,
            })}
          >
            Menu item 1
          </div>
          { /* rest of your menu items here */ }
        </div>
    );
}

使用className动态设置menu元素的类

1 个答案: