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レンダー機能内でのみ使用できますか？

1つのページに多くのコンポーネントが必要な場合、各要素に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}/> 
     ); 
    } 
} 

は、ループ内でrenderメソッドを呼び出すための悪い習慣はありますか？私はあなたが再びドキュメントの上に行く必要があるかもしれないと思う

THX