在反应中显示/隐藏自定义组件

Question

我试图在点击时显示用户详细信息，在点击其他用户详细信息时我想隐藏或删除页面上现有的用户详细信息，下面是我的一段代码

TODO.js

import React from "react";
import {fetchjson} from '../../helpers/helpers';
import Userdetail from "../../components/userdetails/userdetail"; 
export default class Todo extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        showComponent: false,
        userData: []
    };
}
handleClick = () => {

    fetchjson('users/' + this.props.tododdate.userid).then((data) => {
        console.log(data)
        this.setState({
            showComponent: true,
            userData: data
        });

    });

}
render() {
    const thistodo = this.props.tododdate;
    return ( <div className = "row" >
        <div className = "col-md-6" >
        <h3 onClick = {this.handleClick} > USER ID: {thistodo.userid } </h3> 
      <ul className = "list-unstyled" > {
            thistodo.todo.map(todo =>
                <li > < input type = "checkbox"
                checked = {
                    todo.completed
                }
                /> {todo.title}</li >
            )
        } </ul> </div> 
        <div className = "col-md-6" > {
            this.state.showComponent ?
            <Userdetail userprops = {
                this.state.userData
            }/> :
            null
        } </div> </div>
    )
  }
 }

UserDetail.js

import React from "react";
export default class Userdetail extends React.Component{
 render() {
   const thisuserdata=this.props.userprops;
   return (
   <div>
    <label>name : </label>
      {thisuserdata.name}<br/>
      <label>username : </label>
     {thisuserdata.username}<br/>
     <label>name : </label>
   {thisuserdata.name}<br/>
   <label>phone : </label>
    {thisuserdata.phone}<br/> 
   <label>website : </label>
   {thisuserdata.website}<br/>
    </div>
   )}
 }

当我点击用户 ID：1/用户 ID：2... 时，我可以显示用户详细信息，但我想在点击用户 ID：2 详细信息时隐藏用户 ID：1 详细信息。

Answer 1

你可以使用这个语法

{showComponent && <div></div>}

基于 showComponent 值，您可以显示隐藏 div，也可以通过 setState

更新该值