React的createClass怎么使用

這篇文章主要介紹“React的createClass怎么使用”，在日常操作中，相信很多人在React的createClass怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React的createClass怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在使用React.createClass之前，我們先來看官方給出的解釋

ReactClass createClass(object specification)

創(chuàng)建一個給出說明的組件類（這個給出的說明也就是其參數(shù) object specification）。這個組件實現(xiàn)一個render方法，并且render方法返回一個單一的節(jié)點。這個返回的節(jié)點可能包含任意深度的子節(jié)點結(jié)構(gòu)。該方法與標準的原型類不同的地方就是不用使用new去實例化對象。這些組件被很好的封裝起來，可以很好的為你創(chuàng)建后臺實例。

當然，單看這些定義我是不知道該如何去使用createClass方法的（我覺的我翻譯的不夠標準）。那下面我們直接通過一個實例來解釋如何使用React.createClass()。

例一

var Root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這是一個簡單的例子。雖說簡單，但是有兩個需要注意的地方。

第一點就是生命的Root首字母必須大寫，也就是說我們?nèi)绻麑oot 寫成root，那么<root />就會被直接解析成html標簽（<root></root>）。下面我們來看如下的代碼（下面的代碼是錯誤的）

var root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
        );
    },
});
ReactDOM.render(
        <root />,
        document.getElementById('content')
);

其解析的結(jié)果如下

<root data-reactid=".0"></root>

顯然這不是我們想要的結(jié)果。

第二點是，在一個createClass創(chuàng)建的組件中只能有一個根節(jié)點。這個根節(jié)點可以有任意層的子節(jié)點。下面我們看如下的代碼

var Root = React.createClass({
    render:function(){
        return (
          <h1>跡憶博客</h1>
          <a>www.onmpw.com</a>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這段代碼也是存在錯誤的，在解析過程中會報如下的錯誤

SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>跡憶博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....

因此如果我們想要實現(xiàn)上述我們想要的結(jié)果，可以在h1和a的外面再加一層節(jié)點。如下

例二

var Root = React.createClass({
    render:function(){
        return (
          <div>
            <h1>跡憶博客</h1>
            <a>www.onmpw.com</a>
          </div>
        );
    },
});
ReactDOM.render(
        <Root />,
        document.getElementById('content')
);

這樣就能保證一個組件中只有一個根節(jié)點，又能實現(xiàn)我們想要的效果。

其實對于render來說，該方法會返回一個React組件樹，用來接受該組件樹的變量名稱必須首字母大寫。并且該組件樹只能有一個根節(jié)點，這也是符合實際情況的。最終這棵組件樹會被ReactDOM.render渲染成HTML標簽。

對于例二中的<div>標簽，它并不是一個真正的DOM節(jié)點，而是一個虛擬的DOM節(jié)點。你可以這樣認為，組件樹中的這些節(jié)點就是一些標記或者數(shù)據(jù)，只是React知道該如何處理這些標記或者數(shù)據(jù)。

其實React.createClass的知識點很多，這里我只是簡單介紹在使用過程中應(yīng)該注意的問題。

到此，關(guān)于“React的createClass怎么使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>