React.js - 使用 renderComponentToString 时未调用 componentDidMount答案

【问题标题】：React.js - componentDidMount not called when using renderComponentToStringReact.js - 使用 renderComponentToString 时未调用 componentDidMount
【发布时间】：2014-07-18 19:01:33
【问题描述】：

我正在像这样将 html 内容设置为 Twitter 的 Bootstrap 弹出窗口。

var Content = React.createClass({
    componentDidMount: function() {
        alert('ok'); // not called
    },
    render: function() {
        return (
            <div>foobar</div>
        );
    }
});

var Button = React.createClass({
    componentDidMount: function() {
        $(this.getDOMNode()).popover({
            placement: 'right',
            trigger: 'manual',
            html: true,
            content: function() {
                return React.renderComponentToString(<Content />);
            }
        });
    },
    render: function() {
        return (
            <button onClick={this.handleClick} className="btn btn-default">{this.props.name}</button>
        );
    },
    handleClick: function() {
        $(this.getDOMNode()).popover('toggle');
    }
});

为此，我可以将 html 内容设置为弹出框，我必须使用 renderComponentToString 方法。不幸的是，这个方法没有调用方法componentDidMount。为什么会发生这种情况以及如何解决？谢谢。

【问题讨论】：

Reacts componentDidMount 方法仅在React.renderComponent 函数触发的初始渲染后调用。 Content 组件永远不会使用该方法安装，因此永远不会调用 componentDidMount 方法。我认为您尝试做的事情是不可能使用这种方法的，并且可能有一种最合适的方法来实现您正在寻找的结果。
你考虑过使用React Bootstrap吗？
@cvrebert 在回答中这么说，然后从他们的文档中复制/粘贴代码 sn-p :-)
不幸的是，他们文档中的代码 sn-p 不起作用。我收到警告：“OverlayTrigger”中未指定必需的道具“容器”。什么应该是“容器”？父节点？我在文档/示例中没有找到任何提及它。
我在上一个示例中只发现了一个名为“mountNode”的奇怪变量。我试图将父节点传递给它，但没有运气。

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

我调整了React-bootstrap docs 并让弹出框以这种方式工作：

/** @jsx React.DOM */

var Button = ReactBootstrap.Button;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
var Popover = ReactBootstrap.Popover;

var Content = React.createClass({
    render: function() {
        return (
          <OverlayTrigger trigger="click" placement="right" overlay={<Popover title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>}>
            <Button bsStyle="default">Holy guacamole!</Button>
          </OverlayTrigger>
        );
    }
});

包含 react-bootstrap.js 以获取全局可访问的组件。它在bower package 中提供。

当然也包括 React。

【讨论】：