如何調用React/Jsx中的渲染函數

Question

我想調用某個嵌入式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> 
    ); 
} 
} 

Answer 1

要調用你必須添加()

{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>

這取決於你的需要的功能，U可以使用this.renderIcon()或bindthis.renderIcon.bind(this)

UPDATE

這就是你如何調用render之外的方法。

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

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

推薦的方法是編寫一個單獨的組件並導入它。