React.js 实现挂载后的 UI 效果答案

【问题标题】：React.js implement UI effects after mountingReact.js 实现挂载后的 UI 效果
【发布时间】：2015-08-12 00:37:12
【问题描述】：

假设我有一个 React 类，它有一个组件 - 带有 autosize.js 和 bootstrap form helpers phone 库的字段。有一个麻烦。由于在加载 DOM 之后恰好呈现了这些少数（以及许多其他）库，我需要手动将这些库实现到组件 - 类似这样：

componentDidMount: ->
  phoneInput = $(React.findDOMNode(@refs.phone)) # found appropriate field
  phoneInput.bfhphone(phoneInput.data()) # approve bfh-phone for this field

如何让我的 React 类在将它们挂载到 DOM 之前已经使用这些 UI 库？

【问题讨论】：

在创建 DOM 元素之前，没有任何东西可以附加。您使用的回调是连接到不是为 React 设计的库的正确位置。
嗯...我想有人已经为这种反应行为创建了一个库。不是吗？
我不明白你的问题。

标签： javascript dom coffeescript reactjs react-jsx

【解决方案1】：

如@WiredPrairie 所说，要与非React DOM 库集成，您需要使用componentDidMount。但是，您可以将该逻辑封装在自定义组件中，因此您只需执行一次。例如，您使用的代码：

componentDidMount: ->
  phoneInput = $(React.findDOMNode(@refs.phone))
  phoneInput.bfhphone(phoneInput.data())

假设您有几个这样的字段。您可以创建一个名为 BFHPhoneInput 的特殊组件或自动为您执行此操作的其他组件：

BFHPhoneInput = React.createClass
  componentDidMount: ->
    input = $(React.findDOMNode(@refs.input))
    input.bfhphone(input.data())

  render: ->
    props =
      ref: "input"
    # copy all this.props to props
    props[key] = val for own key, val of this.props
    React.DOM.input props

（我不熟悉bfhphone 插件，因此您可能需要做更多的事情才能正确集成它。）

现在您可以多次使用它而无需担心插件：

MyComponent = React.createClass
  render: ->
    React.DOM.div {},
      BFHPhoneInput {value: @state.phone1, onChange: @handlePhone1Change}
      BFHPhoneInput {value: @state.phone2, onChange: @handlePhone2Change}

【讨论】：