Question

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

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

感谢您的支持。

Answer 1

假设您作为index传递的key值是从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
      }

Answer 2

假设您的索引是索引的支柱...（听起来很明显，但直到您通过我们的父组件检查）

 {
    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作为prop，如果true，则不显示按钮。

我现在必须走了，我希望它有效，我稍后会检查你的答案。

Answer 3

对不起，我回答得有点迟了。但那天我解决了这个问题。正确的答案是检查道具。感谢您的支持！

＆＃13;

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

＆＃13;

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

3 个答案: