javascript - React.js 实现挂载后UI效果

Question

假设我有一个 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 库？

Answer 1

要与非 React DOM 库集成，正如 @WiredPrairie 所说，您需要使用 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}