React/Jsx içinde bir işlevin içinde bir işleve nasıl çağrılır?

Question

Bazı gömülü html içinde bir işlevi çağırmak istiyorum. Aşağıdakileri denedim ama işlev çağrılmadı. Bir işleme yönteminin içinde bir işlevi çağırmanın yanlış yolu bu mu?

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

Answer 1

bunu ihtiyaca bağlıdır ()

{this.renderIcon()} 

Answer 2

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>

eklemek zorunda işlevi çağırmak için, u kullanabilir ya this.renderIcon() veya bindthis.renderIcon.bind(this)

UPDATE

Bu, oluşturma işleminin dışında bir yöntem olarak adlandırdığınız yöntemdir.

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

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

Önerilen yol ayrı bir bileşen yazmak ve almaktır.