使用反应 html 的简单原型

Question

我是新手，正在尝试编写一个简单的菜单功能。

当我单击选项 A 时，标题内容应替换为选项 A 并显示其列表。同样，当我单击选项 B 时，选项 A 应替换为选项 B 并列出其嵌套列表值。

现在我可以渲染 html 值，但不确定如何继续。需要帮助:(

http://codepen.io/anon/pen/wMRVJd

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {
      active: false
    }
  }
  handleClick() {
    alert("123");
  }
  render() {
    return (
      <div class="wrapper">
        <div className ="heading-conatiner">Heading container </div>
        <ul>
            <li onClick={this.handleClick} className="main-list">Choice A
              <ul className= "sub-list">
                <li>Sub 1--Choice A</li>
                <li>Sub 2---Choice A</li>
              </ul>
            </li>
            <li onClick={this.handleClick} className="main-list">Choice B
              <ul className= "sub-list">
                <li>Sub 1--Choice B</li>
                <li>Sub 2--Choice B</li>
              </ul>
            </li>
        </ul>
      </div>
    )
  }
}
React.render(<Search />, document.getElementById('root'))

Answer 1

我认为最好的方法是将菜单项存储在状态中，

this.state = {
  menu: 'Heading Content',
  menus: {
    a: ['Sub 1 - Choice A', 'Sub 2 - Choice A'],
    b: ['Sub 1 - Choice B', 'Sub 2 - Choice B']
  }
}

以某种方式表示对项目的点击与特定菜单相关联，具有data-属性或更多功能：

handleClick(menu) {
  return (event) => {
    const selectedMenu = this.state.menus[menu];
    this.setState({
      menu: (
       <ul>{
          menu.map((item) => {
            return <li>{item}</li>;
          })
       }</ul>
    });
  };
}

按如下所示更新您的点击处理程序：

<li onClick={this.handleClick('a')} className="main-list">Choice A

然后让你的标头显示状态而不是字符串（这将需要你做一些内部HTML愚蠢的操作）：

<div className ="heading-conatiner">{this.state.menu}</div>

这是一个更新的代码笔，绝对可以改进很多：http://codepen.io/anon/pen/MKZNVP

Answer 2

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false,
      choice: 'A'
    }
  }
  handleClick(choice) {
    this.setState({choice: choice })
  }
  render() {
    var choices = this.props.choices[this.state.choice].map(function(e, i){
      return (<li key={i}>{e}</li>);
    });
    return (
      <div class="wrapper">
        <div className="heading-conatiner">
            <ul className="sub-list">
                {choices}
              </ul>
        </div>
        <ul>
            <li onClick={this.handleClick.bind(this,'A')} className="main-list">Choice A
            </li>
            <li onClick={this.handleClick.bind(this,'B')} className="main-list">Choice B
            </li>
        </ul>
      </div>
    )
  }
}
var choices = {
  A: ['choiceA1', 'choiceA2'],
  B: ['choiceB1', 'choiceB2']
}
React.render(<Search choices={choices}/>, document.getElementById('root'))

考虑将选择作为道具传递给组件。也许将当前选择或选择存储在状态中。在这里检查一下，http://codepen.io/anon/pen/yeGmqR