Question

看起来ModalTrigger在提供React组件时不能很好地发挥作用。请考虑以下事项：

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实例化组件的方式，或者这是我应该以某种方式解决的正常/预期行为？

谢谢！

编辑：我想将此作为评论发布，但无法正确格式化：/

解决这个问题的一种方法是让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的工作方式上如此。当div中的顶级MyDiv传递道具时，会发生魔法，如下所示：

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组件

1 个答案: