如何仅在父元素中显示按钮？

我有一个小问题。我有一个嵌套的表。该表中的第一项应该删除。到目前为止，一切都很好。但是，如何才能在第一个元素上显示“删除用户”按钮？如何仅在父元素中显示按钮？

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）} /> ）; }） } –

如何仅在父元素中显示按钮？

回答

相关问题