具有条件表数据道具的类组件答案

【问题标题】：Class component with conditional table data props具有条件表数据道具的类组件
【发布时间】：2021-05-09 10:46:18
【问题描述】：

我有一个由表格组成的反应类组件。该表有一个编辑和删除按钮，如果用户未登录，我想禁用该按钮。我有一个 isAuthenticated 值，用于检查用户是否未登录

【问题讨论】：

如何在Exercise 组件中接收isauthenticated？它是props 的一部分还是通过其他方式（例如钩子或上下文）？
你尝试过 Redux 吗？您可以将 isAuthenticated 值存储在 redux 存储中并在您的类组件中访问它。有关 redux 的更多信息，您可以在这里查看redux.js.org/introduction/getting-started

标签： reactjs react-router state render react-props

【解决方案1】：

给这只猫剥皮的方法不止一种。一种方法是为链接创建自定义组件

const DisablableLink = ({disabled = false, children, ...rest}) => 
  disabled 
  ? <span style={{color: '#CCCCCC'}}>{children}</span>
  : <Link {...rest} >{children}</Link>

这将让您执行以下操作：

您可以通过将disabled 传递为true 来禁用链接
样式化禁用和启用的组件

您的代码如下所示。（我假设 isAuthenticated 来自道具。

const Exercise = props => (

    <tr>
      <td>{props.exercise.username}</td>
      <td>{props.exercise.description}</td>
      <td>{props.exercise.duration}</td>
      <td>{props.exercise.date.substring(0,10)}</td>
      <td>( 
        <DisablableLink disabled={!props.isAuthenticated} to={"/edit/"+props.exercise._id}>edit</DisablableLink> | <DisablableLink disabled={!props.isAuthenticated} onClick={() => { props.deleteExercise(props.exercise._id) }}>delete</DisablableLink>
      ) 
      </td>
    </tr>
  )

I have created a Codesandbox example for you

【讨论】：

我通过Auth0的高阶组件访问isAuthenticated，这里是我使用的例子github.com/auth0/auth0-react#use-with-a-class-component
我还修改了代码以显示整个文件，非常感谢您在第一个示例中显示实际步骤，您能否修改它以使用我从 Auth0 访问 isAuthenticated 的方式？
另外，如果您将我的类组件重新编写为功能组件更有意义，请随意，我只是从教程中获得此文件，并试图通过添加来建立我的反应知识在应用程序上构建。
您在未通过身份验证时不会显示锻炼列表。那么，当整个区块不显示时，单独禁用链接有什么用？
没关系我已经弄清楚了，但如果您能提供帮助，我还有一个问题，我如何更改练习列表以仅获取与登录后已通过身份验证的特定用户相关的练习？我假设我需要设置状态以强制组件重新渲染，并确保我在 componentdidmount 上有一个条件来检查身份验证以进行正确的调用？非常感谢您的帮助