javascript - 为什么我的按钮没有在 React 中渲染？

Question

所以我是 react 新手，我想添加渲染逻辑，以便“更新类(class)”和“删除类(class)”按钮仅在以下情况下显示:

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

• 并且 user._id 与 UserId 匹配这是我到目前为止所拥有的:

类(class)详情

    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;