как мне обработать кнопку удаления без рендеринга дочернего компонента

#reactjs

Вопрос:

Как мне обработать кнопку удаления без рендеринга дочернего компонента, кнопка удаления должна отображаться внутри карточки независимо от того, отображается ли родительский или дочерний компонент.
Есть ли другой способ передать реквизиты дочернему компоненту без рендеринга самого дочернего компонента?
Заранее спасибо…

 const cardone = <CardOne />;
class LoginForm extends Component {
 state = {
   card1: cardone,
 };

 handleDelete = () => {
   if (this.state.card1 !== <CardOne />) return this.setState({ card1: "" });
   else return this.state.card1;
   console.log("yeaah");
 };

 render() {
   return (
     <div className="site-card-wrapper">
       <Row gutter={18} style={{ marginTop: 250 }}>
         <Col
           span={7}
           style={{
             marginLeft: 80,
             marginRight: 15,
           }}
         >
           <CardOne onDelete={this.handleDelete} />;{this.state.card1}
         </Col>
         <Col span={7} style={{ marginRight: 15 }}>
           {this.state.card1}
         </Col>
         <Col span={7}>
           <Card id="003" bordered={false}>
             <h1 style={{ marginLeft: 140 }}>Item 3</h1>
             Lorem Ipsum is simply dummy text of the printing and typesetting
             industry. Lorem Ipsum has been the industry's standard dummy text
             ever since the 1500s, when an unknown printer took a galley of
             type and scrambled it to make a type specimen book. It has
             survived not only five centuries
             <Button type="primary" style={{ marginTop: 20 }} block danger>
               Delete
             </Button>
           </Card>
         </Col>
       </Row>
     </div>
   );
 }
}

вот компонент Card (карта antd)

   
  state = { delete: this.props.onDelete };

 
    
 
  render() {
    return (
      <Card bordered={false}>
        <h1 style={{ marginLeft: 140 }}>Item 1</h1>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries
        <Button
          onClick={this.state.delete}
          type="primary"
          style={{ marginTop: 20 }}
          block
          danger
        >
          Delete
        </Button>
      </Card>
    );
  }
}

export default CardOne;

1. Извините, ваш вопрос неясен. Когда вы нажимаете на кнопку удаления, карта должна удаляться, не так ли? Если он будет удален, он не будет отображаться.

2. да, карта должна быть удалена, и для удаления вам необходимо обновить состояние, поэтому мой вопрос в том, как компонент card может получить доступ к состоянию LoginForm без отображения LoginForm

3. добавлен ответ, чтобы показать, как вы можете отобразить дочерний компонент условно на основе состояния.

Ответ №1:

Вы можете условно отобразить компонент, проверив его состояние. В этом примере вы можете присвоить card1 значение null и отображать компонент только в том случае, если он не равен null.

Это всего лишь пример, вам нужно настроить коды в соответствии с вашим собственным использованием.

 class LoginForm extends Component {
 state = {
   card1: cardone,
 };

 handleDelete = () => {
   this.setState({ card1: null }) //set card1 to null so it will not be rendered
 };

 render() {
   return (
     <div className="site-card-wrapper">
       <Row gutter={18} style={{ marginTop: 250 }}>
         <Col
           span={7}
           style={{
             marginLeft: 80,
             marginRight: 15,
           }}
         >
           { card1 amp;amp; <CardOne onDelete={this.handleDelete} /> } //Add this line to conditionally show CardOne component
           {this.state.card1}
         </Col>
         <Col span={7} style={{ marginRight: 15 }}>
           {this.state.card1}
         </Col>
         <Col span={7}>
           <Card id="003" bordered={false}>
             <h1 style={{ marginLeft: 140 }}>Item 3</h1>
             Lorem Ipsum is simply dummy text of the printing and typesetting
             industry. Lorem Ipsum has been the industry's standard dummy text
             ever since the 1500s, when an unknown printer took a galley of
             type and scrambled it to make a type specimen book. It has
             survived not only five centuries
             <Button type="primary" style={{ marginTop: 20 }} block danger>
               Delete
             </Button>
           </Card>
         </Col>
       </Row>
     </div>
   );
 }
}