Question

我有这段代码：

class ItemWrap extends Component {
    constructor() {
        super();
        this.state = { showItem: true};
        this.removeItem = this.removeItem.bind(this);
    }

    removeItem() {
        this.setState({ showItem: false });
    }

    render() {
        var item = this.state.showItem ? <Item data_items={this.props.data_items} /> : '';
        return (
            <div id="sss">
                {item}
                <button onClick={this.removeItem}>remove image</button>
            </div>
        );
    }

}

export default ItemWrap;

点击按钮，我删除{item}。但按钮是留下来的。单击按钮后我需要删除所有ItemWrap。帮帮我）

Answer 1

首先，removeItem函数是为改变状态标志而设计的，然后你可以用这个标志来看你想要的东西。

例如： if(flag) return (your current div); else return( whatever you want , empty or other )

Answer 2

渲染应该在父组件中管理，这是一个可能的解决方案

class ItemWrap extends Component {
   constructor() {
       super();
   }

   render() {
       return (
           <div id="sss">
               <Item data_items={this.props.data_items} />
               <button onClick={this.props.onClickBtn}>remove image</button>
           </div>
       );
   }

}

export default ItemWrap;

然后在包装器中，您可以管理ItemWrap的渲染

class Wrapper extends Component {
   constructor() {
       super();
       this.state = { showItem: true};
       this.removeItem= this.removeItem.bind(this);
   }

   removeItem() {
       this.setState({ showItem: false });
   }

   render() {
      return (
          <div>
              { this.state.showItem && <ItemWrapper onClickBtn={this.removeItem} /> }
          </div>
      );
   }

}

export default Wrapper;

React js - 我无法删除组件

2 个答案: