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

IT技术 javascript reactjs function render jsx
2021-03-24 08:08:16

我想在一些嵌入式 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>
   );
 }
}
3个回答

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

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

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

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

这似乎更好，因为当您需要传递事件或参数时，这有效
2021-06-12 08:08:16

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

首先，函数是 JavaScript 中的第一类对象。这意味着它们被视为任何其他变量。函数可以作为参数传递给其他函数，可以由另一个函数返回，也可以作为变量赋值。在这里阅读更多。

因此，我们通过 在末尾添加括号 ()来使用该变量来调用函数。

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

其它你可能感兴趣的问题
上一篇如何在 React 中使用 materialize-css？ 下一篇React Router BrowserRouter 在不通过主页点击的情况下直接进入子页面时导致“404 Not Found - nginx”错误