HTMLクラス属性を使用して反応コンポーネントをレンダリングする方法は？

Question

私は次のように試みましたが、動作していないようです。これは、HTMLクラスを使用して反応コンポーネントをレンダリングすることは可能ですか？

HTML

<div class="appKlass"> 
</div> 

JSX

ReactDOM.render(
    <h3>Hello Universe</h3>, 
    document.getElementsByClassName("appKlass") 
) 

Answer 1

getElementsByClassName HTML要素のアレイ状物（HTMLCollection）を返します。しかし、renderには第2引数としてDOMノードが必要です。したがって、getElementsByClassNameによって返されたものにインデックスを与え、配列から特定の要素を取得する必要があります。

ReactDOM.render(
    <h3>Hello Universe</h3>, 
    document.getElementsByClassName("appKlass")[0] 
) 

Answer 2

document.querySelector('.appKlass')を使用するときれいになります。これにより、単一のDOM要素またはnullが返されます。ページに複数の.appKlassがある場合、最初のページが返されます。