为什么我的按钮没有在反应中呈现？

Question

因此，我是个新手，我想添加渲染逻辑，以便仅在以下情况下显示“更新课程”和“删除课程”按钮：

• 有一个经过身份验证的用户。

• 和user._id匹配UserId这是我到目前为止所拥有的：

CourseDetail

    class CourseDetail extends Component {
              constructor(props) {
                super(props);
                this.state = {
                  course: [],
                  user: [] //user state contains user data
                };

                this.handleButtonLogic = this.handleButtonLogic.bind(this);
              }

                componentDidMount() {
                  this.handleButtonLogic() {
                }


              handleButtonLogic() {
                const user = this.state; 
                const isLoggedIn = localStorage.getItem('IsLoggedIn');
                const UserId = localStorage.getItem('UserId');
                const button = document.getElementsByName('button')
            if (!isLoggedIn && user._id !== UserId) {
             button.style.display = 'none'
            }  else {
              button.style.display = ''
            }
              }

            render() {
        const { course, user } = this.state;

        return (//JSX inside
          <div>
            <div className="actions--bar">
              <div className="bounds">
                <div className="grid-100">
                  <span>
                    <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink> 
                    <NavLink to={"#"} className="button" onClick={this.handleDelete} > Delete Course</NavLink>
                  </span>
    }

export default CourseDetail;

这是我得到的错误：

有人可以帮忙吗？

Answer 1

我只是将您的逻辑移到了渲染自身内部，并使用三元运算符有条件地进行渲染。 如果用户已通过身份验证，并且用户ID与当前用户的ID相匹配，则会显示按钮。

仔细看看三元：

{(!isLoggedIn && user._id !== UserId) ? (<span>
   <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
   <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
</span>) : null}

编辑代码：如果执行以下操作，则不需要handleButtonLogic() ，我也已将其删除。

class CourseDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: [],
      user: [] //user state contains user data
    };
  }

  render() {
    const {course, user} = this.state;
    const isLoggedIn = localStorage.getItem('IsLoggedIn');
    const UserId = localStorage.getItem('UserId');
    return (
      <div className="actions--bar">
        <div className="bounds">
          <div className="grid-100">
            {(!isLoggedIn && user._id !== UserId) ? (
              <span>
                <NavLink to={`/courses/${course._id}/update`} className="button">Update Course</NavLink>
                <NavLink to={"#"} className="button" onClick={this.handleDelete}>
                  Delete Course</NavLink>
              </span>
            ) : null}
        </div>
      </div>
    </div>
  )
}

export default CourseDetail;

Answer 2

为了做出反应，与从javascript修改DOM相比，需要一种不同的思维方式。 在这里，我通过添加逻辑来隐藏/隐藏类，从而添加了显示/隐藏按钮的逻辑。 您也可以将条件逻辑添加到整个范围。

const hide = {
  display: none  
};

class CourseDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      course: [],
      user: []
    };
  }

  handleDelete = () => {
  }

  handleUpdate = () => {
  }

  render() {
    const { course, user } = this.state;

    return (
      //JSX inside
      <div>
        <div className="actions--bar">
          <div className="bounds">
            <div className="grid-100">
              <span>
                <NavLink 
                  to={`/courses/${course._id}/update`}
                  className={'button ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleUpdate()}
                >
                    Update Course
                </NavLink> 
                <NavLink 
                  to={"#"} 
                  className={'button ' + (!isLoggedin && user._id != UserId ? 'hide' : '')}
                  onClick={() => this.handleDelete()} 
                >
                    Delete Course
                </NavLink>
              </span>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CourseDetail;