Question

我有一个旧的javascript函数/对象，可以做类似这样的事情

function convertToReadOnly()
{
    var readOnlyBlocks = $('.read-only');

    for(var c=0; c<readOnlyBlocks.length; c++)
    {

            var fields = $(readOnlyBlocks[c]).find('input[type="text"]');
            for(var d=0; fields.length; d++)
            {
                var p = document.createElement('p');
                $(p).html($(fields[d]).val());
                $(fields[d]).remove();
                $(readOnlyBlocks[c]).append(p);
                etc...
            }
            repeat for select, textarea, etc...

    }
}

我升级我的应用程序以使用React。我的挑战是我不确定何时应该启动此convertToReadOnly()功能。我尝试将convertToReadOnly()函数放入我的一个反应组件的componentDidUpdate()中。但当我查看我的错误控制台时，我看到了消息

未捕获的不变违规：findComponentRoot（...，.0.6.3.0.1.0）：   无法找到元素。这可能意味着DOM意外   变异（例如，通过浏览器），通常是由于忘记了a   使用表格时，嵌套标签，如

，或者使用   父级中的非SVG元素。尝试检查子节点   具有React ID“。<。p>的元素

我的问题是，做这一切的最佳方法是什么？我应该在另一个加载周期机会上解雇我的convertToReadOnly()吗？我不应该用jquery操纵DOM吗？如果是这样，那么我该如何操纵dom的反应版本呢？还有其他想法吗？

编辑 - 我为什么要尝试这样做？

在我升级到反应之前，我发现依靠当前和父css类名来确定当前和子元素的编辑权限非常有用。因此，例如，如果div具有类access-denied，则删除所有子元素。如果div有一个类read-only，那么所有子元素都将被转换为它们的只读等价物（不一定是readonly =＆＃34; readonly＆＃34;，元素可能会转换为其他html元素，可以用不同的方式设计。）

我发现这是一种更易于维护的方法

使用if / else语句检查每个可能的控件来乱丢我的视图文件

或

为每个组件创建单独的只读视图

任何元素都可以更容易地继承父元素的访问权限，并相应地呈现自身。由于我有新的反应，我似乎无法找到一种方法来协调我的方法与反应方法。是因为我的思维方式与反应发展哲学不相容？

Answer 1

有人建议创建更高阶的组件

https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775

如何在React渲染之前或之后操纵标记

1 个答案: