Реакция компонента в html

Question

Я думаю, что я не понял концепцию ReactJS. Я думал, что могу написать с ним «пользовательские теги». Например, я мог бы сделать поле ввода, с некоторой дополнительной функциональностью, так что я мог бы использовать его следующим образом: -

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

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

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

Как я понимаю, я должен пройти «theForm» на мой компонент, который оказывает полный форме, правильно? Пользовательские теги разрешены только внутри функции рендеринга JSX?

Если мне нужно много компонентов на одной странице, я должен вызвать метод ReactDOM.render() для каждого элемента? Как так:

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")); 

Большое спасибо!

Answer 1

Я думаю, что нашел то, что хочу - тот же компонент несколько раз на странице. В моем примере у меня есть пользовательское поле ввода, но я не хочу, чтобы вся форма была компонентом.

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}/> 
     ); 
    } 
} 

Является ли это плохая практика, чтобы вызвать метод визуализации в цикле?

THX