Question

我在github和google网上问了这个问题。没结果。所以问题是：

假设我想创建一些可重用的组件。

if(!empty($row['verified'])){
     $this->session->set_userdata([
         'name' => $row['name'],
         'email' => $email,
         'login_time' => time(),
         'last_activity' => time(),
         'session_valid' => TRUE
     ]);
     return true;
}

假设我想要在一个页面中使用多个歌曲播放器。在这种情况下，我无法将ID（＃player-audio）分配给audio元素，因为该页面将具有重复的ID。

那么如何在事件处理程序中引用本地组件？在这种情况下，如何在on-click事件的事件处理程序中引用本地音频元素？

在react.js中，我可以为音频组件分配一个引用，并通过this.refs.XXX引用。我怎么在试剂中这样做？谢谢！

Answer 1

我认为您尝试这样做有一些问题。特别是你正在使用原子和你使用getElementById的方式，这可能会导致试剂/反应问题。我的建议是使用原子来保持所有状态（包括音频播放器的状态）。

如果我们假设标题是唯一的并且可以用作键，我会存储所有玩家作为哈希的哈希。创建一个函数可能会很有用将歌曲标题作为参数并返回关键字表示，即

(keyword-title "Some Title") => :some-title

{:first-title {:title "First Title"
               :url "http://....."
       :player :stop} ;; could be :stop :pause :play etc
 :another-title {:title "Another Title"
                 :url "some other url"
         :player :stop}}

当你创建一个新的＆＃39;玩家组件，你实际做的是添加另一个进入国家原子。如果需要交互式按钮/组件，则可以定义他们在州原子上运作。然后定义一个只渲染所有组件的组件你的州原子的条目。

(defn song-player [title url player-state]
  (let [players (r/atom {})] ;; this will only be called once - first time
    (fn [title url player-state]
  (swap! players assoc (keyword-title title) {:title title
                                              :url url
                          :player player-state})
  [player-component players])))

第一次调用歌曲播放器时，它会创建播放器原子，然后它会调用匿名函数。这个匿名函数现在是渲染函数这个组件。这就是为什么重要的是匿名功能和父函数具有相同的参数签名。

玩家组件获取玩家原子，其中包含所有状态信息与每个标题相关联的玩家的头衔和状态，遍历原子并按比例呈现每个条目

(defn player-component [players]
  (into [:div]
        (for [p (keys @players)]
     ^{:key p} [:div.player
                 [:p "Title: " (get-in @players [p :title])]
         [:audio {:src (get-in @players [p :url])}]
         [:input {:type "button"
                  :value (get-in @players [p :player-state])
              :on-click #(toggle-player-state p players)}]])))

toggle-player-state设置当有人点击按钮时的新状态

(defn toggle-player-state [player-id players]
  (if (= :stop (get-in @players [player-id :player-state]))
    (swap! players assoc-in [player-id :player-state] :play)
(swap! players assoc-in [player-id :player-state] :stop)))

显然，这只是我的头脑，尚未经过测试，而且确实如此伪代码多于其他任何东西。我不知道[：audio]类型扩展到什么并且可能存在需要照顾的限制或其他事件您需要设置的处理程序（例如：on-complete或其他）。然而校长应该是正确的。有了Reagent / react，我认为目标是避免直接设置/读取DOM。你管理状态，让试剂/反应完成剩下的工作。

Answer 2

好的，我什么都不知道，但我一直在寻找类似的答案，到目前为止我想出的是：

试剂不存储refs（理论上你可以使用它 “这个 - 作为你的功能内部”但是
您可以使用此处的component-did-mount回调中显示的方法来激发您的方式：https://gist.github.com/danielytics/d4374cd51deec7201250

我确信现在为时已晚，无法帮助你，但你永远不会知道。

在事件处理程序中替代React引用？

2 个答案: