ReactJS：addEventListener、ReactDOM.render（）、および（）の最初のパラメータはreturn文で何を意味しますか？

Question

私はReactJSを勉強していて、次のコンポーネントの例に出くわした：最初のパラメータ、'click'は、this.refs.myComponentDiv.removeEventListener()とthis.refs.myComponentDiv.removeEventListener()に何を意味している

class MyComponent extends React.Component { 
    constructor(props) { 
     super(props); 

     // set the default internal state 
     this.state = { 
      clicks: 0 
     }; 

     this.clickHandler = this.clickHandler.bind(this); 
    } 

    componentDidMount() { 
     this.refs.myComponentDiv.addEventListener(
      ‘click’, 
      this.clickHandler 
     ); 
    } 

    componentWillUnmount() { 
     this.refs.myComponentDiv.removeEventListener(
      ‘click’, 
      this.clickHandler 
     ); 
    } 

    clickHandler() { 
     this.setState({ 
      clicks: this.clicks + 1 
     }); 
    } 

    render() { 
     let children = this.props.children; 

     return (
      <div className=”my-component” ref=”myComponentDiv”> 
       <h2>My Component ({this.state.clicks} clicks})</h2> 
       <h3>{this.props.headerText}</h3> 
       {children} 
      </div> 
     ); 
    } 
} 

？そして、なぜあなたはpropsからsuper()に渡らなければなりませんか？ ()の意味は({this.state.clicks} clicks})の意味ですか？

const StatelessCmp = (props) => { 
    return (
     <div className=”my-stateless-component”> 
      {props.name}: {props.birthday} 
     </div> 
    ); 
}; 

// --- 
ReactDOM.render(
    <StatelessCmp name=”Art” birthday=”10/01/1980” />, 
    document.getElementById(“main”) 
); 

そして、あなたはステートレスなコンポーネントを使用することを選択します：

最後には、私はステートレスなコンポーネントに出くわしましたか？いつ使用しますかReactDOM.render()は何ですか、特にdocument.getElementById(“main”)部分ですか？通常は、export default ...とするだけです。

そして、以下では、<p>'sの2つの数字を単に<MyComponent/>クラスの上に表示しますか？

<MyComponent headerText=”A list of paragraph tags”> 
    <p>First child.</p> 
    <p>Any other <span>number</span> of children...</p> 
</MyComponent> 

ありがとう、アップアップして回答を受け入れるようにしてください！

Answer 1

1. は、「クリック」あなたの性質を渡す必要がありReact.Componentあなたがクラスを拡張しているとして、あなたは、ビューポート/要素で

2. をクリックしたときに作成されたクリックイベントの名前です。クラスがスーパークラス（React.Component）に正しくインスタンス化されていることを確認します。その他の情報については、オブジェクト指向プログラミングに関する書籍をお読みください

3. コード内に({this.state.clicks} clicks})というステートメントが見つかりません。

4. あなたはステートレスなコンポーネント

5. ReactDOM.renderを（使用this.stateを使用しない場合）、実際に自分のページに自分のコンポーネントを作成し、レンダリングします。 document.findElementById（ 'main'）は、ReactDOMがid = "main"でhtml要素をこの要素にレンダリングできるhtml要素を探しています。

あなたが反応

のようなJSフレームワークを学ぶ前に、私はあなたが基本的な本を読んだり、最初にJavaScriptでオンラインチュートリアルを取ることをお勧めします