Question

我正在尝试让一个组件在bootstrap popover中呈现：

componentDidMount() {
        $(this.refs.shareLink).popover({
            react: true,
            title: "Share!",
            content: <ShareLinkComponent lobbyid={this.props.lobbyid}/>
        })
    }
.....
<td><a href="#"><i ref="shareLink" className="fa fa-share-square-o"></i></a></td>
.....


class ShareLinkComponent extends Component {
    render() {
        return (
            <div>
                <p>Copy And Share</p>
                <input type="text" value={`${window.location.host}/party/${this.props.lobbyid}`}/>
            </div>
        )
    }
}

那么我怎样才能使这项工作完全正确。

Answer 1

如果你正在逃离React世界进入jQuery-land，你就不能使用JSX - JSX不是HTML，它看起来就像它。

要将某些JSX转换为可以传递给jQuery的HTML字符串，可以使用以下内容：

    var html = ReactDOMServer.renderToStaticMarkup(
      <ShareLinkComponent lobbyid={this.props.lobbyid} />
    );
    $(this.refs.shareLink).popover({
        react: true,
        title: "Share!",
        content: html
    })

然而，HTML将是完全静态的;您通常在ShareLinkComponent内找不到的互动性会起作用。为此，您需要将一个活的React组件渲染到DOM节点，然后将该节点附加到覆盖层。

如果可以，您可以查看基于React的解决方案，例如react-overlays（React Bootstrap uses）。

Answer 2

出于性能和可维护性原因，请将代码迁移到React-Bootstrap。这很简单，将来会为您节省很多麻烦。

如何在引导程序弹出窗口内呈现react组件

2 个答案: