0

看起来 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>

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

4

1 回答 1

0

似乎答案由 MyDiv 负责，至少在 react-bootstrap 的工作方式上。当顶层传入 props 时，魔法就会发生，如下所示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}/>），但是，嗯......和谐。

于 2015-04-12T11:37:04.523 回答