如何在 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>
);
}
}
281207 次浏览
小开
最佳答案

To call the function you have to add ()

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

it depends on your need, u can use either this.renderIcon() or bind this.renderIcon.bind(this)

UPDATE

This is how you call a method outside the render. 

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


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

The recommended way is to write a separate component and import it.

小开

The fix was at the accepted answer. Yet if someone wants to know why it worked and why the implementation in the SO question didn't work,

First, functions are first class objects in JavaScript. That means they are treated like any other variable. Function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. Read more here.

So we use that variable to invoke the function by adding parentheses () at the end.

One thing, If you have a function that returns a funtion and you just need to call that returned function, you can just have double paranthesis when you call the outer function ()().


提交答案