Reagieren Komponente in HTML

Question

Ich glaube, ich habe das Konzept von ReactJS nicht verstanden. Ich dachte, ich könnte "benutzerdefinierte Tags" damit schreiben. Zum Beispiel könnte ich ein Eingabefeld, mit einigen zusätzlichen Funktionen machen, so dass ich es verwenden könnte wie folgt: -

<form id="theForm"> 
    <input type="text" /> 
    <input type="text" /> 

    <my-input-field /> 
    <my-input-field /> 
    <my-input-field /> 

    <input type="submit" /> 
</form> 

Wie ich es verstehe, muß ich „theForm“ zu meiner Komponente zu übergeben, die die vollständige rendert Form, oder? Benutzerdefinierte Tags sind nur innerhalb der JSX-Renderfunktion zulässig?

Wenn ich viele Komponenten auf einer Seite haben möchte, muss ich die ReactDOM.render() -Methode für jedes Element aufrufen? Wie so:

HTML:

<form id="theForm"> 
    <input type="text" /> 
    <input type="text" /> 

    <input id="custom-1" /> 
    <input id="custom-2" /> 
    <input id="custom-3" /> 

    <input type="submit" /> 
</form> 

JS:

ReactDOM.render(<my-input-field />, document.getElementById("custom-1")); 
ReactDOM.render(<my-input-field />, document.getElementById("custom-2")); 
ReactDOM.render(<my-input-field />, document.getElementById("custom-3")); 

Vielen Dank!

Answer 1

Ich glaube, ich habe gefunden, was ich will - die gleiche Komponente mehrmals in einer Seite. In meinem Beispiel habe ich ein benutzerdefiniertes Eingabefeld, aber ich möchte nicht, dass das ganze Formular eine Komponente ist.

HTML:

 <form> 
      <input type="text" name=""> 
      <div class="my-input-field" data-myprop="First" ></div> 
      <input type="text" name=""> 
      <input type="text" name=""> 
      <div class="my-input-field" data-myprop="Second" ></div> 
      <input type="text" name=""> 
      <div class="my-input-field" data-myprop="Third" ></div> 
      <input type="submit"> 
     </form> 

index.tsx:

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import { MyInputField } from "./components/MyInputField"; 

let myInputFields = Array.prototype.slice.call(document.getElementsByClassName("my-input-field")); 
for (let element of myInputFields) { 
    ReactDOM.render(<MyInputField myprop={element.dataset.myprop} />, element) 
} 

MyInputField.tsx

import * as React from "react"; 

export interface MyInputFieldProps { 
    myprop: string; 
} 

export class MyInputField extends React.Component<MyInputFieldProps, undefined> { 
    render() { 
     return (
      <input value={this.props.myprop}/> 
     ); 
    } 
} 

Ist eine schlechte Praxis ist das Verfahren in der Schleife machen zu nennen?

THX