1

我有一个由包装器 div 和内部复选框组成的反应组件，这是渲染函数：

render: function(){
    return (
        <div id="wrapperDiv">
            <input type="checkbox" id="checkbox" />
        </div>
    )
}

在componentDidMount我将这个复选框换成一个将充当复选框的 div 时，这里是componentDidMount函数；

componentDidMount: function(){
    var div = document.createElement("div");
    div.id = "checkboxDiv";
    this.getDOMNode().appendChild(div);
}

当在屏幕上渲染它时，空的 div 被添加到组件中并且一切正常。

在我的玩笑测试中，我尝试了这个；

TestUtils.scryRenderedDOMComponentsWithTag(component, "div");

但是这个数组的长度是 1，只带回 id 为“wrapperDiv”的 div，看起来好像它没有将 checkboxDiv 添加到 DOM。但是，当我在测试中尝试这个时；

component.getDOMNode().parentNode.getElementsByTagName("div");

它带回了wrapperDiv和checkboxDiv

是否有原因它没有在组件中添加 div，或者测试中是否需要额外的步骤？

4

1 回答 1

1

TestUtils.scryRenderedDOMComponentsWithTag()只看 Reacts 内部渲染树。而且由于您在 React 不知道的情况下添加 DOM 节点，因此 DOM 节点不会出现在 Reacts 渲染树中。

于 2015-04-24T11:34:09.847 回答