Question

我已经渲染了几个这样的组件：

<MyComponent />

<MyComponent />

这是组件代码。它具有一个应该在单击时隐藏的按钮。

import React from 'react';

const MyComponent = (props) => <div>

    <div>
       <button onClick={hideme}>Click to hide this component</button>
    </div>


</div>;



function hideme() {
    // code here 
}

export default MyComponent;

我的问题是...

知道这不是基于类的组件。

如何在单击按钮时分别隐藏它们？

Answer 1

Blockquote

尝试使用React钩子的新功能应该可以React Hooks Doc

Answer 2

您对此方法有多种解决方案。

一种方法是使用从功能组件上的onClick方法传递的事件对象，并设置所需对象的样式，请参见此处： https://codesandbox.io/s/vwn0k2wzl

另一种方法是让父组件（容器）处理该按钮的状态，然后将其隐藏功能传递给视图组件，这是一种更常见且更“反应”的方式（管理和处理）状态（从上到下）），请参见此处： https://codesandbox.io/s/lxx627l7rl

您也可以使用例如display: none隐藏该组件，但是后一种方法确实将您的组件从树中删除了。

Answer 3

您可以在状态下使用布尔值，该布尔值确定是否在渲染函数中返回某些内容：

constructor(props){
    super(props)
    this.state = {
        hidden: false
    }
}

render() {

    if(this.state.hidden){
        return null;
    }

    return <div>
            <div>
             <button onClick={() => this.setState({hidden: true})}>Click to hide this component</button>
            </div>
           </div>;
}

Answer 4

如果您这样做是为了了解React在内部的工作方式，则可以尝试以下方法：

const MyComponent = props => (
  <div>
    <div>
      <button onClick={hideme}>Click to hide this component</button>
    </div>
  </div>
);

function hideme(e) {
  const target = e.currentTarget;
  let instance =
    target[
      Object.keys(target).find(key => key.startsWith("__reactInternalInstance"))
    ];
  while (instance.tag) {
    instance = instance.return;
  }
  instance.child.stateNode.style.display = "none";
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 5

如果您的父组件是类，则可以执行以下操作

class MyParentComponent etxends React.Component {
   state = {
     isShow: true
  }
   hideHandler =  () =>  
      this.setState({isShow: false})

   render(){
       return(
          <MyComponent isShow={this.state.isShow} hideHandler={this.hideHandler} />
       )
   }

}

这是非子类别的子项

const MyComponent = props =>  (
  <div> 
        { props.isShow && <button onClick={props.hideHandler}>hide</button>
 </div>
)

React onclick在非类组件上隐藏此组件

5 个答案: