react-bootstrap ModalTrigger 不适用于 React 组件

Question

当提供 React 组件时，ModalTrigger 似乎无法正常运行。考虑以下因素：

var MyDiv = React.createClass({
    render : function() {
        return <div>Click me!</div>
    }
});

var Content = React.createClass({
    render : function() {
        return <div>
                    <ModalTrigger modal={<MyModal/>}>
                        <MyDiv/>
                    </ModalTrigger>
                    <ModalTrigger modal={<MyModal/>}>
                        <div>No, click me!</div>
                    </ModalTrigger>
               </div>
    }
});

React.render(<Content/>, document.getElementById("mydiv"));

单击第一个 div 时没有任何反应，但第二个 div 按预期打开模式。

DOM 看起来相同，但是当对 Chrome 使用 React 扩展时，我可以看到在第一个 ModalTrigger 和底层 div 之间有一个额外的 React 组件，名为MyDiv.

这是一个问题的原因是 ModalTrigger 依赖其子元素 onClick 来显示模态。当使用常规 div 时，它按预期工作，但由于这里的直接子组件是 React 组件，因此没有明显的方法可以使此连接转到实际的 div 组件。

所以我的问题是，这是 react-bootstrap 的缺点，无法处理 React 实例化组件的方式，还是我应该以某种方式解决的正常/预期行为？

谢谢！

编辑：我想 post 作为评论，但无法正确格式化：/

解决这个问题的一种方法是让 MyDiv 知道它有一个 this.props.onClick 方法，并显式触发它：

var MyDiv = React.createClass({
    render : function() {
        return <div onClick={this.props.onClick>Click me!</div>
    }
});

这会产生耦合（或用于 PropTypes/getDefaultProps 解耦的额外线路），这远非理想。

另一种方法是将 MyDiv 包装在另一个匿名 div:

<ModalTrigger modal={<MyModal/>}>
    <div><MyDiv/></div>
</ModalTrigger>

哪个好多了，但不知何故也感觉不对。有什么建议吗？

Answer 1

似乎答案是在 MyDiv 的责任下，至少在 react-bootstrap 是如何工作的。当 MyDiv 中的顶级 div 传递 props 时，魔法就会发生，如下所示：

var MyDiv = React.createClass({
    render : function() {
        return <div {...this.props}>Click me!</div>
    }
});

这既与 react-bootstrap 的内部组件行为同步，又允许 MyDiv 对传递的任何内容保持不可知。正如 Facebook 所建议的那样，使用和声解构语法（例如，var {myProp, ...otherProps} = this.props 然后在 <MyDiv {...otherProps}/> 中使用它）可能更好，但是，好吧......和声。

react-bootstrap ModalTrigger 不适用于 React 组件

react-bootstrap ModalTrigger doesn't work on React components

react-bootstrap