在 React Props 中过滤链接

Question

我有一个 React class 组件，它由 table 组成。 table 有一个编辑和删除按钮，如果用户未登录，我想禁用它。我有一个 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，我使用三元表达式 return 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>
  )

在 React Props 中过滤链接

Filter links in React Props

components

state

reactjs

auth0

react-props