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

我有一个老的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...

    }
}

函数converttoradonly（）
{
var readOnlyBlocks=$（'.read-only'）；
对于（var c=0；c有人建议创建一个高阶组件