Question

我将html内容设置为Twitter的Bootstrap popover。

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内容设置为popover，我必须使用 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。

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

1 个答案: