javascript - React.js - 使用 renderComponentToString 时未调用 componentDidMount

Question

我正在将 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方法。为什么会发生这种情况以及如何解决？谢谢。

Answer 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。