React/Jsx에서 렌더 내의 함수를 호출하는 방법

React/Jsx에서 렌더 내의 함수를 호출하는 방법

내장된 HTML 내의 함수를 호출하고 싶습니다.다음을 시도했지만 함수가 호출되지 않습니다.이것이 렌더 메서드 내의 함수를 호출하는 잘못된 방법입니까?

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

추가할 함수를 호출하려면()

{this.renderIcon()}   

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>

당신의 필요에 따라, 당신은 둘 중 하나를 사용할 수 있습니다.this.renderIcon()또는 바인드 this.renderIcon.bind(this)

갱신하다

렌더링 외부에 있는 메서드를 이렇게 부릅니다.

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

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

다른 컴포넌트를 작성하여 Import하는 것이 좋습니다.

그 해결책은 받아들여진 답변에 있었다.그러나 SO 질문의 구현이 왜 효과가 있었는지, 왜 효과가 없었는지를 알고 싶다면

첫째, 함수는 JavaScript에서 퍼스트 클래스 객체입니다.즉, 다른 변수와 동일하게 취급됩니다.함수는 다른 함수에 인수로 전달될 수 있으며 다른 함수에 의해 반환될 수 있으며 변수에 값으로 할당할 수 있습니다.자세한 것은 이쪽.

이 변수를 사용하여 마지막에 괄호()를 추가하여 함수를 호출합니다.

하나는 함수를 반환하는 함수가 있고 반환된 함수만 호출하면 되는 경우 외부 함수()를 호출할 때 이중 파란테시스(double parantesis)를 가질 수 있습니다.

언급URL : https://stackoverflow.com/questions/40298136/how-to-call-a-function-inside-a-render-in-react-jsx