如何在 React/Jsx 的渲染中调用函数答案

【问题标题】：How to Call a Function inside a Render in React/Jsx如何在 React/Jsx 的渲染中调用函数
【发布时间】：2017-03-10 22:28:21
【问题描述】：

我想在一些嵌入的 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>
   );
 }
}

【问题讨论】：

标签： javascript reactjs function render jsx

【解决方案1】：

要调用该函数，您必须添加()

{this.renderIcon()}

【讨论】：

这取决于您的需要，您可以使用this.renderIcon() 或绑定this.renderIcon.bind(this)。它是否正确？有人在下面写了。
超级小注，对于那些使用coffeescript的人，这将是{@renderIcon()}
我建议不要这样做。 1.) renderIcon 是/应该是一个组件。 {this.renderIcon()} 不是你在 React 中使用组件的方式。 2.) 你的渲染是你的组件渲染的真实来源。抽象增加了额外的复杂性。
对于那些对为什么这通常和客观上是一种不好的做法感兴趣的人，请参阅：kentcdodds.com/blog/dont-call-a-react-function-component 值得一提的是，这个答案是正确的，并且很好地回答了发布的问题。我只是认为值得努力教导人们，如果他们发现自己在编写这样的代码，那么就有理由不这样做。
@Galupuf IMO 可以证明这样做的一个原因是，例如，您有一个条件并且不想使用嵌套三元：myConditionalRender(){ if(loading) return <Loader /> if(error) return <Error /> return <MyComponent /> } 和 render(){ <div> ...more stuff ... {myConditionalRenderer()} }

【解决方案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>

这取决于您的需要，您可以使用this.renderIcon() 或bind 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>
   );
}

推荐的方式是编写一个单独的组件并导入它。

【讨论】：

这似乎更好，因为当您需要传递事件或参数时，它可以工作

【解决方案3】：

修复是在接受的答案。然而，如果有人想知道它为什么起作用以及为什么 SO 问题中的实现不起作用，

首先，函数是 JavaScript 中的第一类对象。这意味着它们被视为任何其他变量。函数可以作为参数传递给其他函数，可以由另一个函数返回，也可以作为值分配给变量。 Read more here.

所以我们使用该变量来通过添加括号 () 在末尾strong>来调用函数。

一件事，如果您有一个返回函数的函数并且您只需要调用该返回的函数，则在调用外部函数 ()() 时可以只使用双括号。

【讨论】：