web-dev-qa-db-ja.com

React / Jsxのレンダリング内で関数を呼び出す方法

埋め込みHTML内の関数を呼び出したい。以下を試してみましたが、関数は呼び出されません。これはrenderメソッド内で関数を呼び出す間違った方法でしょうか？

import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {
      constructor(props) {
        super(props);
        this.state = { 
         checking:false
      };
        this.renderIcon = this.renderIcon.bind(this);
  }

  renderIcon(){
    console.log("came here")
    return(
      <div>Function called</div>
    )
  }

  render() {

   return (
       <div className="patient-container">

       {this.renderIcon}      

      </div>
   );
 }
}
javascriptreactjsfunctionrenderjsx
46
lost9123193

関数を呼び出すには、()を追加する必要があります

{this.renderIcon()}
83
dknaack
class App extends React.Component {
  
  buttonClick(){
    console.log("came here")
    
  }
  
  subComponent() {
    return (<div>Hello World</div>);
  }
  
  render() {
    return ( 
      <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
          {this.subComponent()}
       </div>
     )
  }
  


}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

必要に応じて、uはthis.renderIcon()または bindthis.renderIcon.bind(this)のいずれかを使用できます

UPDATE

これは、レンダリングの外でメソッドを呼び出す方法です。

buttonClick(){
    console.log("came here")
}

render() {
   return (
       <div className="patient-container">
          <button onClick={this.buttonClick.bind(this)}>Click me</button>
       </div>
   );
}

推奨される方法は、個別のコンポーネントを作成してインポートすることです。

12
Saahithyan Vigneswaran

修正は受け入れられた答えにありました。それでも、なぜそれが機能し、なぜSO質問の実装が機能しなかったのかを知りたい場合は、

まず、関数はJavaScriptのファーストクラスオブジェクトです。つまり、他の変数と同様に扱われます。関数は、他の関数への引数として渡すことができ、別の関数から返すことができ、変数への値として割り当てることができます。 詳細はこちら 。

そのため、この変数を使用してかっこ（）を追加して関数を呼び出します最後に。

1つは、関数を返す関数があり、その関数を呼び出すだけでよい場合、外側の関数（）（）を呼び出すときに二重括弧を付けることができます。

2
prime