[英]How to Call a Function inside a Render in 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>
);
}
}
要调用该函数,您必须添加()
{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>
);
}
推荐的方法是编写一个单独的组件并将其导入。
解决的方法是接受的答案。 但是,如果有人想知道它为什么起作用以及为什么SO问题中的实现不起作用,
首先, 函数是JavaScript中的一流对象 。 这意味着它们像其他任何变量一样被对待。 函数可以作为参数传递给其他函数,可以由另一个函数返回,也可以作为值分配给变量。 在这里阅读更多 。
因此,我们使用该变量在末尾 添加括号()来调用该函数 。
有一件事,如果您有一个返回函数的函数,而您只需要调用该返回的函数,则在调用外部函数()()时就可以具有双重括号。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.