Wie kann ich die Schaltfläche nur im übergeordneten Element anzeigen?

Question

Ich habe eine kleine Frage. Ich habe eine geschachtelte Tabelle. Der erste Eintrag in dieser Tabelle sollte entfernt werden. Alles ist soweit in Ordnung. Aber wie kann ich die Schaltfläche "Benutzer entfernen" nur für die ersten Elemente anzeigen?

class UserList extends Component { 
 

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

 
    parentUserToggle (item, index) { 
 
    this.setState({ 
 
     openDetail: !this.state.openDetail 
 
    }) 
 
    } 
 

 
    render() { 
 
    const { userProfile, index } = this.props; 
 
    let parentUserItem = null; 
 
    if (userProfile.children instanceof Object) { 
 
     parentUserItem = userProfile.children.map((children, index) => { 
 
     return <UserList key={children.ID} index={index} userProfile={children} /> 
 
     }); 
 
    } 
 
    return (
 
     <div className="table-row" key={index}> 
 
     <div className="col-md-1"> 
 
      { 
 
      userProfile.children ? 
 
      <button 
 
       className="btn btn-primary" 
 
       onClick={this.parentUserToggle.bind(this, userProfile.children)} 
 
      > 
 
       { !this.state.openDetail ? 'OPEN' : 'CLOSE' } 
 
      </button> 
 
      : null 
 
      } 
 
     </div> 
 
     <div className="col-md-3">{userProfile.Name}</div> 
 
     <div className="col-md-3">{userProfile.City}</div> 
 
     <div className="col-md-3">{userProfile.Phone}</div> 
 
     <div className="col-md-2"> 
 
      { 
 
      userProfile || !parentUserItem ? 
 
      <button 
 
       className="btn btn-danger" 
 
       onClick={this.props.removeUser} 
 
      > Remove User </button> 
 
      : null 
 
      } 
 
     </div> 
 
     <div className={this.state.openDetail ? 'table-true' : 'table-false'}> 
 
      { 
 
      parentUserItem 
 
      } 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

Dank für die Unterstützung.

Answer 1

Es tut mir leid, dass ich etwas spät geantwortet habe. Aber das Problem habe ich an diesem Tag gelöst. Die richtige Antwort war, mit Requisiten zu überprüfen. Danke für Ihre Unterstützung!

{ 
 
    this.props.removeUser ? 
 
    <button 
 
    className="btn btn-danger" 
 
    onClick={this.props.removeUser} 
 
    > Remove User </button> 
 
    : null 
 
}

Answer 2

Unter der Annahme, dass der Wert von index, die Sie vorbei wie key ist ein inkrementeller Zahlenwert von 1 starten, können Sie tun:

onClick={Number(index) === 1 ? this.props.removeUser : null} 

Oder hängen davon ab, was Sie zu tun versuchen, aber hoffentlich wird dies Ihnen gute Dienste leisten

 { 
     userProfile || !parentUserItem || Number(index) === 1 ? 
     <button 
      className="btn btn-danger" 
      onClick={this.props.removeUser} 
     > Remove User </button> 
     : null 
     } 

Answer 3

Unter der Annahme, dass Ihr Index die Stütze des Index ist ... (klingt offensichtlich, aber nicht, bis Sie für uns geben Ihre Stammkomponente zu überprüfen)

{ 
    parseInt(index) === 0 || userProfile || !parentUserItem || ? 
    <button 
     className="btn btn-danger" 
     onClick={this.props.removeUser} 
    > Remove User </button> 
    : null 
    } 

Nach der ausführlichen Erklärung über die das Problem:

{ Object.keys(userData).map((key, index) => { 
    return(
    key === 0 ? 
    <UserList key={key} index={index} userProfile={userData[key]} removeUser= 
    {this.userDeleteToggle.bind(this, key)} removeUserButton={true} /> : 
    <UserList key={key} index={index} userProfile={userData[key]} removeUser= 
    {this.userDeleteToggle.bind(this, key)} removeUserButton={false} />); }) 
} 

nun die removeUserButton als Stütze in Ihrem Kind-Komponente verwenden, wenn sie wahr ist die Taste nicht machen.

Ich muss jetzt gehen, ich hoffe es funktioniert, ich werde später Ihre Antwort überprüfen.