如何僅在父元素中顯示按鈕？

我有一個小問題。我有一個嵌套的表。該表中的第一項應該刪除。到目前爲止，一切都很好。但是，如何才能在第一個元素上顯示「刪除用戶」按鈕？如何僅在父元素中顯示按鈕？

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> 
 
    ); 
 
    } 
 
}

謝謝支持。

來源

2017-06-30 Emre Gozel

您的代碼不工作 –

您可以使用索引來檢查是否這是第一要素。如果索引爲0，則可以啓用刪除按鈕。 –

是的是這個片段沒有充滿代碼。 –

對不起，我回答遲了一點。但那天我解決了這個問題。正確的答案是檢查道具。感謝您的支持！

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

來源

2017-07-06 06:22:38

假設您傳遞爲key的的index值是從1開始的增量數值，你可以這樣做：

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

或者，取決於你想要做什麼，但希望這將有助於你

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

來源

2017-06-30 09:22:33 punkbit

我不知道爲什麼它被拒絕。但那不是我想要的。我希望「刪除用戶」按鈕僅在主數組中呈現。一旦你在一個孩子裏面，不要成爲一個渲染器。你可以檢查刪除用戶按鈕嗎？ –

如果你解釋什麼是'main'數組我可以給你答案，但是我已經分享的應該足以讓你解決這個問題 – punkbit

http://imgur.com/a/jv7bK這是我的數組。我在這轉轉地圖。 –

假設你的索引是索引的道具......（聲音明顯但直到你通過我們的父組件檢查）

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

你對問題的詳細解釋後：

{ 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} />); }) 
}

現在使用removeUserButton作爲道具的子組件內，如果真不渲染按鈕。

我現在得走了，我希望它能工作，我會在稍後檢查你的答案。

來源

2017-06-30 09:27:33

這是我的數組imgur.com/a/jv7bK我只想在數組中的第一個元素中刪除按鈕。 Array中的子項中沒有刪除按鈕，因爲刪除按鈕不適用於兒童。 –

請提供您的父母組件。 –

'{ Object.keys（用戶數據）.MAP（（鍵，指數）=> { 回報（ <的UserList 鍵= {}鍵索引 = {索引} USERPROFILE = {的UserData [鍵]} removeUser = {this.userDeleteToggle.bind（this，key）} /> ）; }） } –

如何僅在父元素中顯示按鈕？

回答

相關問題