Question

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

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

在将它们安装到DOM之前，如何让我的React类已经使用这些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}

React.js在安装后实现UI效果

1 个答案: