如何不通过onClick事件实现Redux action的派发？

你写的三元表达式语法报错的核心原因是：JSX的条件渲染分支仅支持返回合法的JSX节点，不支持直接放置副作用执行语句（比如dispatch调用）。你当前的需求属于「当指定状态变为true时触发副作用」，最符合React设计规范的实现方式是使用useEffect监听状态变化。

最优实现方案（推荐） #

新增useEffect监听notificationClicked的状态变化，当状态为true时触发action派发，逻辑和渲染完全分离，避免渲染过程中执行副作用导致的不可预期问题：

// 放在组件内部原有其他useEffect之后即可
useEffect(() => {
  if (notificationClicked) {
    dispatch(notificationsStateUpdate({ newNotifications }))
  }
}, [notificationClicked, newNotifications, dispatch])

同时修改原return中的条件渲染代码，仅保留渲染逻辑即可：

{notificationClicked ? <NotificationList notifications={newNotifications} /> : null}

可选实现（不推荐） #

如果一定要在三元表达式内完成派发，可以用逗号运算符包裹两个表达式，JSX会返回逗号最后一位的组件结果，但是这种写法将副作用耦合在渲染逻辑中，容易触发重复派发、渲染异常等问题，仅做参考：

{notificationClicked ? (
  dispatch(notificationsStateUpdate({newNotifications})),
  <NotificationList notifications={newNotifications} />
) : null}

内容的提问来源于stack exchange，提问作者Alex