react 是一个处理复杂数据导致 UI 变化的一个好工具，但是工具虽好，但是不能看啥都是钉子。在我们常见的操作中，大多数情况交互并不是很重，这种情况下，用传统的 rails view 来生成界面，实际上是个不错的选择。

平时在处理 form 的时候，我一般不会完全用 react 处理表单，之后 提交一个 formdata， 而是选择靠 rails 来生成 form 进行快速提交，这样就不需要又写界面又写 rails api。

今天遇到的情况比较有典型性：

大概是表单里有一个字段存一个 json，这个 json 本身会有复杂的配置，有很多操作都影响着这个 json 的生成，

因为操作比较多，于是这块当然用 react_component 比较好实现，但是个 json 本身是由表单最外层的一个 category 选择框来确定不同的模型的，同时这两个界面模块中间还隔了一些表单的其他内容，这些内容因为业务原因，必须放在 category 和 react 组件的中间

平常有两种方案能解决这个问题：

• 将整个 form 都放在 react_component 里：

这种方式其实就是走 rails api 的方式了，但是由于这里我已经用 rails view 实现了其他表单属性的界面和校验，再改一次很麻烦

• 在 下拉框 select change 中发起一个 srj, 返回 js 将原来的 react_component 删掉，再重新渲染一个新的 react_component

这种方式处理起来比较简单，即将 react_component 外层用 一个 div 包起来，之后 change 回来的 js 先清空他，在 render escape 一个 react_component，这种方式倒是比较简单，同时也不改其他的代码，只是要多调用一下服务端，感觉有点没必要。

最后决定不如用 stimulusjs 来控制 react_component 的 props 好了，这样就可以直接通过 js 而不过后端来控制显示了。

这是相关的代码逻辑

import {Controller} from 'stimulus'

export default class extends Controller {
  static targets = ["dropdown", "metaArea"]

  connect(){
    this.changeMetaAreaAttribute();
  }

  readDropdownValue(){
    return this.dropdownTarget.value
  }

  needShowMetaArea(){
    return this.dropdownTarget.value === 'Conversations::QuestionConversation'
  }

  changeMetaAreaAttribute(){
    // 注意此处， 因为 react_component 实际存储 props 本身是string 型， 所以需要转化一下
    let json = JSON.parse(this.metaAreaTarget.dataset.reactProps)
    json["category"] = this.readDropdownValue()
    this.metaAreaTarget.dataset.reactProps = JSON.stringify(json) 
    ReactRailsUJS.mountComponents() // 注意此处， 再修改完毕之后， 需要让 React Component 重新渲染一下
  }

}

之后此处的 react_component，需要多传一个参数，让 stimulusjs 能够指定到 target

<%= react_component "AdminMetaEditors", {init_meta: chat_task.meta, category: chat_task.category}, {data: {chat_workflow_category_target: 'metaArea'}} %>

这样就能够 react_component 和 stimulus 混用了

总结：

1. 在前端上没必要二者选一，成年人向来是全都要。简单逻辑上 stimulus, 复杂逻辑上 react 是一个不错的选择。
2. react component 和 stimulus 逻辑上是可以交互的，只需要让 stimulus 改变 react_component 的 props，再通知 react_component 渲染即可