1
當我使用JS時，我傾向於爲瀏覽器調出控制檯並即時處理值。從JavaScript控制檯中查找和操作React.js組件
我有一個頁面，我使用React來渲染一些組件，我有這樣的想法，即能夠從控制檯操作它的狀態來調試設計怪癖，這是隻有當組件在角落狀態。
我遇到了問題，我無法獲得對組件的引用。
我覺得可能有一個當前正在渲染的活動組件列表，但是我無法在React全局對象或其他任何地方找到它。
是否有對正在渲染的組件的暴露引用？
我呈現組件，如：
<script>React.render(React.createElement(Comp, domElem))</script>
我可以參考存儲的React.createElement()的結果，但它seems to be an antipattern。此外，我使用ReactJS.NET庫來處理服務器端渲染，因此整個React.render行都會生成並很難修改。
我的另一個想法是創建一個mixin，使組件明確揭露本身上安裝，如：
var ActiveComponents = [];
var debugMixin = {
componentDidMount: function() {
var id = this.getDOMNode().id;
ActiveComponents[id] = {
id: id,
getState:() => { return this.state; },
setState: (state) => { this.setState(state); },
comp: this
};
}
};
是否有弊端像這樣的做法？這是上面提到的同樣的反模式嗎？
雖然比直接在組件代碼中糾纏這些測試鉤子更清潔，但添加mixin仍然是一種修改，我希望儘可能避免這種情況。
我希望能得到答案的問題是粗體。