Question

我有一些文件加载到我的react组件中，它们有HTML代码。就像现在一样，纯HTML代码渲染得很好，但是有一些隐藏的＆＃39;每当您单击应用程序的其他部分或上面的文本中的某些按钮时出现的代码（将其视为单击时展开的面板）。只使用旧的<div id="someId" style="display:none">隐藏HTML。

无论如何，我试图通过点击各自的按钮来扩展正确的面板。

所以从理论上讲，我需要做的是通过id找到元素，并在需要时将其切换为阻止，然后在再次点击父级时将其切换回来。

不幸的是，我不知道如何做到这一点，到目前为止无处可去。就像现在一样，我可以访问组件的ID。我想知道的是，我是如何在世界上访问它并改变渲染的内容？

Answer 1

创建你的功能：

function element_do(my_element, what_to_do) {
 document.getElementById(my_element).style.display = what_to_do;
}

以及后者在代码中你可以通过javascript onclick追加你想要的地方取决于你需要什么：

element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show

或创建自己切换：

function toggle_element(element_id) {
      var element = document.getElementById(element_id);
      element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>

Answer 2

这样做的反应方式是各州。假设你知道如何使用状态，我会做这样的事情：

class ShowHide extends React.Component {
  constructor() {
     super();
      this.state = {myState: true};
      this.onClick = this.onClick.bind(this)
  }

  onClick() {
   this.setState({myState: !this.state.myState})  //set the opposite of true/false
  }

  render() {
    const style = {myState ? "display: none" : "display:block"} //if myState is true/false it will set the style
    return (<div>
     <button onClick={this.onClick}>Click me to hide/show me </button>
     <div id="myDiv" style={style}> Here you will hide/show div on click </div>
    </div>)
  }
}

通过Id获取HTML元素并通过React切换其CSS

2 个答案: