Javascript 如何翻译以下jQuery代码以作出反应？

我有以下代码，基本上折叠所有子菜单，仅在单击时打开它们：

<ul class="menu">
  <li>
    <a href="#">One</a>
    <ul class="menu">
      <li>
        <a href="#">Alpha</a>
        <ul class="menu">
          <li><a href="#">Hello</a></li>
          <li><a href="#">World</a></li>
        ...
      <li><a href="#">Beta</a></li>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
</ul>

<script type="text/javascript">
  $(".menu").children().click(function(e) {
    $(this).siblings().find("ul").hide();
    $(this).children().show();
  });
</script>

...





$（“.menu”）.children（）。单击（函数（e）{
$（this.sides（）.find（“ul”）.hide（）；
$（this.children（）.show（）；
});

我使用递归函数创建了一个带有DRF的子菜单API的菜单，并成功地用以下代码显示了该API中的菜单：

class Recursive extends React.Component {
    render() {
        let childitems = null;

        if (this.props.children) {
            childitems = this.props.children.map(function(childitem) {
                return (
                    <Recursive item={childitem} children={childitem.children} />
                )
            })
        }
        return (
            <li key={this.props.item.id}>
                {this.props.item.name}
                { childitems ? <ul>{childitems}</ul> : null }
            </li>
        );
    }
}


class MenuDisplay extends React.Component {
    render() {
        let items = this.props.data.map(function(item) {
            return (
                <Recursive item={item} children={item.children} />
            )
        })
        return (
            <ul>
                {items}
            </ul>
        );
    }
}

类递归扩展React.Component{
render（）{
让childitems=null；
如果（本.道具.儿童）{
childitems=this.props.children.map（函数（childitem））{
返回(
)
})
}
返回(

{this.props.item.name}
{childitems？
{childitems}
:null}

);
}
}
类MenuDisplay扩展了React.Component{
render（）{
让items=this.props.data.map（函数（项）{
返回(
)
})
返回(

{items}

);
}
}

如何重构React代码以包含第一个示例中使用jQuery创建的函数

---

以下是HTML的示例。

我起草了一个工作示例，其中包含了我认为您在React中需要的内容，因为我今天没有生活，也无事可做：）

简而言之，有两种方法可以做到这一点，但我认为最好的方法是创建一个单独的react组件，该组件将根据其状态选择显示或隐藏子组件。它看起来可能比jQuery解决方案的代码多得多，但是，这可能会解决一些由于使用CSS隐藏和显示内容而导致的渲染问题。不管怎么说，这是代码，我将在下面粘贴代码

class Menu extends React.Component{
    constructor(props){
    super(props);
    this.state = {
        open: false
    }

    this.toggleDropDown = this.toggleDropDown.bind(this);
  }

  toggleDropDown(){
    // this toggles the open state of the menu
    this.setState({open: !this.state.open})
  }

  render(){
    // only display children if open is true
    return(
        <ul className="menu">
        <li onClick={this.toggleDropDown}>         {this.props.title}  </li>
        {(this.state.open)?this.props.children:null}
        </ul>
    )
  }
}

class Hello extends React.Component {
  render() {
    return (
    <div>
      <Menu title="one">
        <Menu title="Alpha">
          <ul>
            <li>Hello</li>
            <li>World</li>
          </ul>
        </Menu>
        <Menu title="Beta">
          <ul>
            <li>Hello</li>
            <li>World</li>
          </ul>
        </Menu>
      </Menu>  
      <Menu title="two">
      <ul>
        <li>Alpha</li>
        <li>Beta</li>
        </ul>
      </Menu>
      <ul className="menu">
      <li>three</li>
      <li>four</li>
      </ul>
    </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
this.toggleDropDown=this.toggleDropDown.bind（this）；
}
切换下拉菜单（）{
//这将切换菜单的打开状态
this.setState（{open:！this.state.open}）
}
render（）{
//仅在“打开”为true时显示子项
返回(

{this.props.title}
{（this.state.open）？this.props.children:null}

)
}
}
类Hello扩展了React.Component{
render（）{
返回(

你好
世界


你好
世界


阿尔法
贝塔


三
四

);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

我起草了一个工作示例，其中包含了我认为您在React中需要的内容，因为我今天没有生活，也无事可做：）

简而言之，有两种方法可以做到这一点，但我认为最好的方法是创建一个单独的react组件，该组件将根据其状态选择显示或隐藏子组件。它看起来可能比jQuery解决方案的代码多得多，但是，这可能会解决一些由于使用CSS隐藏和显示内容而导致的渲染问题。不管怎么说，这是代码，我将在下面粘贴代码

class Menu extends React.Component{
    constructor(props){
    super(props);
    this.state = {
        open: false
    }

    this.toggleDropDown = this.toggleDropDown.bind(this);
  }

  toggleDropDown(){
    // this toggles the open state of the menu
    this.setState({open: !this.state.open})
  }

  render(){
    // only display children if open is true
    return(
        <ul className="menu">
        <li onClick={this.toggleDropDown}>         {this.props.title}  </li>
        {(this.state.open)?this.props.children:null}
        </ul>
    )
  }
}

class Hello extends React.Component {
  render() {
    return (
    <div>
      <Menu title="one">
        <Menu title="Alpha">
          <ul>
            <li>Hello</li>
            <li>World</li>
          </ul>
        </Menu>
        <Menu title="Beta">
          <ul>
            <li>Hello</li>
            <li>World</li>
          </ul>
        </Menu>
      </Menu>  
      <Menu title="two">
      <ul>
        <li>Alpha</li>
        <li>Beta</li>
        </ul>
      </Menu>
      <ul className="menu">
      <li>three</li>
      <li>four</li>
      </ul>
    </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
}
this.toggleDropDown=this.toggleDropDown.bind（this）；
}
切换下拉菜单（）{
//这将切换菜单的打开状态
this.setState（{open:！this.state.open}）
}
render（）{
//仅在“打开”为true时显示子项
返回(

{this.props.title}
{（this.state.open）？this.props.children:null}

)
}
}
类Hello扩展了React.Component{
render（）{
返回(

你好
世界


你好
世界


阿尔法
贝塔


三
四

);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

基于Michael Sorensen的代码，我提升了状态并修改了代码。运行结果与jQuery代码几乎相同，只是如果单击“一”，则只会显示直接子项。我有点喜欢，所以我把它放在那里了。代码粘贴在下面

function Menu(props) {
  return (
    <ul className="menu">
      <li onClick={props.onClick}> {props.title} </li>
      {props.open ? props.children : null}
    </ul>
  );
}

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: Array(2).fill(false),
      open2: Array(2).fill(false)
    };

    this.toggleDropDown = this.toggleDropDown.bind(this);
    this.toggleDropDown2 = this.toggleDropDown2.bind(this);
  }

  toggleDropDown(i) {
    const open = Array(2).fill(false);
    this.setState({
      open: open.fill(true, i, i + 1),
      open2: Array(2).fill(false)
    });
  }
  toggleDropDown2(i) {
    const open2 = Array(2).fill(false);

    this.setState({ open2: open2.fill(true, i, i + 1) });
  }

  render() {
    return (
      <div>
        <Menu
          key="0"
          title="one"
          open={this.state.open[0]}
          onClick={() => this.toggleDropDown(0)}
        >
          <Menu
            key="2"
            title="Alpha"
            open={this.state.open2[0]}
            onClick={() => this.toggleDropDown2(0)}
          >
            <ul>
              <li>Hello</li>
              <li>World</li>
            </ul>
          </Menu>
          <Menu
            key="3"
            title="Beta"
            open={this.state.open2[1]}
            onClick={() => this.toggleDropDown2(1)}
          >
            <ul>
              <li>Hello</li>
              <li>World</li>
            </ul>
          </Menu>
        </Menu>
        <Menu
          key="1"
          title="two"
          open={this.state.open[1]}
          onClick={() => this.toggleDropDown(1)}
        >
          <ul>
            <li>Alpha</li>
            <li>Beta</li>
          </ul>
        </Menu>
        <ul className="menu">
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<Hello name="World" />, document.getElementById("container"));

功能菜单（道具）{
返回(

{props.title}
{props.open？props.children:null}

);
}
类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
打开：数组（2）。填充（假），
open2:数组（2）.填充（false）
};
this.toggleDropDown=this.toggleDropDown.bind（this）；
this.toggleDropDown2=this.toggleDropDown2.bind（this）；
}
切换下拉列表（i）{
常量打开=数组（2）。填充（false）；
这是我的国家({
打开：打开。填充（真，i，i+1），
open2:数组（2）.填充（false）
});
}
切换下拉列表2（i）{
const open2=数组（2）.fill（false）；
this.setState（{open2:open2.fill（true，i，i+1）}）；
}
render（）{
返回(
this.toggleDropDown（0）}
>
这个。切换下拉列表2（0
const LINKS = [
    {id: 'one', name: 'One', children: [
        {id: 'alpha', name: 'Alpha', children: [
            {id: 'hello', name: 'Hello'},
            {id: 'world', name: 'World'},
        ]},
        {id: 'beta', name: 'Beta'},
    ]},
    {id: 'two', name: 'Two'},
]

ReactDOM.render(<Menu links={LINKS} />, document.getElementById('root'));