React：映射 ReactDOM.findDOMNode(this) 的子节点

Posted 2023-02-22

【中文标题】React：映射 ReactDOM.findDOMNode(this) 的子节点

【英文标题】：React: map children of ReactDOM.findDOMNode(this)

【发布时间】：2016-06-02 20:17:15

【问题描述】：

我想得到 ReactDOM.findDOMNode(this) 的孩子 这样我就可以根据参考进行样式设置。专门显示 none 一些 refs 和 yes 其他的。

我以为我可以

blockNode = ReactDOM.findDOMNode(this).children

React.Children.map(blockNode, function(el) 
    console.log('el ',el);
)

错误响应：

invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: [object htmlDivElement]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

附：还尝试在 createFragment() 中包装 blockNode，但效果不佳

【参考方案1】：

我找到了相同功能的解决方法。我以不同的方式解决了这个问题，也许这是更惯用的反应，而不是广泛过滤字符串或对象以将其转换为我将根据多个引用进行更改的数组。考虑到那句话的后半部分很拗口，我假设这是做事的反应方式。

我没有关注焦点和操作引用，而是通过在我的渲染中编写 toggleDisplay 函数将其附加到状态和动态内联样式。

信用here

render ()
    var toggleDisplayFocus = function(stateVal) 
    var displayOrNo = stateVal ? "block" : "none";
    return 
       display: displayOrNo
    
    

    return (
    <div style=toggleDisplayFocus(this.state.synthFocusDisplay)>
    contents of div
    </div>
    )

附：如果我不正确并且有使用 react 或 react-dom API 的非常好的方法，请随意，我会选择你的答案作为最佳答案。