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

Question

所以我是新手，我想添加渲染逻辑，以便 "Update Course" 和 "Delete Course" 按钮仅在以下情况下显示：

有一个经过身份验证的用户。
并且 user._id 匹配 UserId 这是我目前所拥有的：

课程详情

    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

对于 React，需要不同于从 javascript 修改 DOM 的思维方式。在这里，我通过添加逻辑来向 show/hide 按钮添加逻辑以隐藏或不隐藏类名。您也可以将条件逻辑添加到整个范围。

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;

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

Why are my buttons not rendering in react?

javascript

if-statement

reactjs

conditional-rendering