Question

是否可以引用/包含 NOT DOM树后代的子反应组件？

用例是由按钮和模态组成的反应组件（按钮显示/隐藏模态）。模态是一个bootstrap模式，除非作为<body></body>的直接子项放置（由于某些位置：内容中的固定css），否则它会呈现错误。我想将按钮插入一个地方，将模态插入不同的地方，但我试图将其作为单个反应组件进行构建。

Answer 1

是的，您可以从反应组件中引用非反应DOM，

TEMPLATE：

<div id="container">

</div>

JSX：

var Hello = React.createClass({
    showModal:function(){
        // inject modal
        var iDiv = document.createElement('div');
        iDiv.id = 'modal';
        iDiv.className = 'block';
        document.getElementsByTagName('body')[0].appendChild(iDiv);
        document.getElementById('modal').innerHTML = 'DONE!';
    },
    render: function() {
        return <div onClick={this.showModal}>CLICK ME (R. component)</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

另一方面，问题是最糟糕的（非反应 - >反应）

这是小提琴：https://jsfiddle.net/1dnty58y/1/

在DOM的不同部分中反应子组件

1 个答案: