在 React Props 中过滤链接

Question

我有一个由表格组成的反应类组件。该表有一个编辑和删除按钮，如果用户未登录，我想禁用该按钮。我有一个 isAuthenticated 值，用于检查用户是否未登录，但不确定如何使用该变量如果用户未登录，则有条件地禁用或不呈现编辑和删除按钮。

Answer 1

你可以像这样传递isAuthenticated：

render() {
  const { isAuthenticated } = this.props.auth0;
  //....
  { this.exerciseList(isAuthenticated) }
} 

exerciseList(isAuthenticated) {
        return this.state.exercises.map(currentexercise => {
          return <Exercise exercise={currentexercise} deleteExercise={this.deleteExercise} key={currentexercise._id} isAuthenticated={isAuthenticated}/>;
        })
}

请注意，在exerciseList 中，它会传递给您的练习。然后，您可以引用props.isAuthenticated 并根据值有条件地渲染（如果isAuthenticated 是false，我使用三元表达式返回null）：

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>
      { props.isAuthenticated ?
        <td><Link to={"/edit/"+props.exercise._id}>edit</Link> | <a href="/#" onClick={() => { props.deleteExercise(props.exercise._id) }}>delete</a></td>
      : 
      <td></td>
      }
    </tr>
  )