Wie man eine reaktive Komponente mit HTML-Klasse-Attribut rendern?

Question

Ich habe versucht, aber es scheint nicht funktioniert. Ist es möglich, eine reaktive Komponente mithilfe der HTML-Klasse zu rendern?

HTML

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

JSX

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

Answer 1

getElementsByClassName gibt ein Array-ähnliches Objekt (HTMLCollection) von HTML-Elementen. Aber render benötigt einen DOM-Knoten als zweites Argument. Sie müssen also einen Index angeben, der von getElementsByClassName zurückgegeben wird, und ein bestimmtes Element aus dem Array abrufen.

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

Answer 2

Es wäre sauberer zu verwenden document.querySelector('.appKlass'). Dies gibt ein einzelnes DOM-Element oder null zurück. Falls es mehrere .appKlass auf der Seite gibt, gibt es die erste zurück.