Question

我想帮助将Jquery插件Tooltipster与My react js组件集成。我试图直接在回调函数中调用react组件：functionBefore(origin, content)，内容完美显示（带有项目的列表），但是当单击一个项目时我收到此错误消息。

Invariant Violation: findComponentRoot ...
Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

这是我的组件：

ListItem = React.createClass({

displayName:
    'ListItem'

getInitialState:->
    {item : ''}

componentWillMount:->
    this.setState({item: this.props.item})

handleClick:(event)->
    event.preventDefault()
    console.log("Clicked")

render:->
    item = this.state.item
    onClick     = this.handleClick.bind(this, item)
    `<li><a className="item" onClick={onClick} href="#">{item.title}</a></li>`

})

为了渲染列表视图，我循环遍历一个对象数组，然后我调用ListItem foreach。之后在my（ListView）的componentDidMount中调用

origin.tooltipster('content', $("#my_selector").html())
content()

以下是我如何渲染全部：

factory = React.createFactory(ListView)
factory = factory({list : items})
React.render(factory, document.getElementById('my_selector'))

原点和内容是通过调用方法传递的一些Tooltipster变量。

__

我认为问题来自于tooltipster处理新内容的方式，它将它复制到自己的div中，以及React对此作出反应的原因：D

任何帮助人员？

React + Jquery插件，可生成动态内容

0 个答案: