Question

render()  {
            return (
                <div>
                    <input type="checkbox" onChange={this.flipPlongeur}/>
                    <h2>Omega {this.stringPlongeur()}}</h2>
                </div>
            );
}

我无法理解为什么this.stringPlongeur()我需要括号来显示任何内容，而如果我将它们放在this.flipPlongeur中，我会得到错误：“在现有状态转换期间无法更新。”我之前的经验是Java，我总是使用括号（）

来调用函数

Answer 1

您可以在JSX中使用{}来表达。如果您将其关闭，它将以纯文本形式打印。这适用于您的h2代码。

对于onChange道具，您将其作为事件处理程序而不是函数调用传递。您可以使用语法

将其作为函数调用传递

onChange={(event) => this.flipPlongeur(event, additionalProps)}

最后，您不应该执行任何导致重新渲染和设置其他状态的setState次调用。请参阅React指南，了解如何处理事件

https://facebook.github.io/react/docs/handling-events.html

和州生命周期

https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 2

差异很大，总之一是返回功能，一个是返回值。

在第一种情况下：onChange={this.flipPlongeur}

您将该函数指定为事件处理程序，只要您更改input元素中的任何内容，就会调用它。

查看文档 Handling events with JSX.

第二种情况：{this.stringPlongeur()}

您正在从该函数返回一些内容并在JSX中呈现该值，这类似于直接在render方法中编写内容。为了使代码清洁，我们通常编写函数并从中返回元素。

如果我把（）放在这个.flipPlongeur我得到错误，为什么？

因为如果你把那个()意味着你直接调用那个函数而不改变输入元素中的任何东西，我认为你在setState里面就是为什么它会抛出错误。

因为setState正在创建无限循环，所以在setState之后重新渲染组件：

render     ------>     flipPlongeur()     ------> setState() --->
    ^                                                           |
    |                                                           |
    |                                                           |
    ____________________________________________________________|

检查此代码段：

＆＃13;

function abc(){
   return 1;
}

console.log('abc = ', abc);

console.log('abc() = ', abc());

＆＃13;

Answer 3

你其实是对的。括号实际上会导致函数执行。使用之间的区别在于，当您使用onClick={this.flipPlongeur}时，您将函数作为参数传递给onClick prop，以便稍后执行click事件时执行。

你可以用一种简单的方式来思考它，比如回调函数传递给另一个函数。

var function1 = function(callback) {
  if (typeof callback === 'function') callback(); 
}

var funtion2 = funtion() {
  alert('funtion1 fired');
}

function1(function2);

// this would be equal to writing it like this

function1(funtion() {
  alert('funtion1 fired');
})

当您像onClick={this.flipPlongeur()}一样使用它时，您将在代码呈现时立即执行该功能。这等于写这个，

onClick={ function() { alert('some random string')}() }

因此，当您使用this.stringPlongeur()时，您希望函数立即执行并返回结果或立即进行更改。

onClick prop期望一个函数，并在该元素上发生click事件时使用事件参数执行它。

您可以使用几种不同的方式将函数传递给onClick或任何其他需要函数的道具。

onClick={this.flipPlongeur} // this would pass the function itself as a parameter
onClick={() => { this.flipPlongeur(); }} // this would create a second function that executes this.flipPlongeur function

希望这可以帮助您理解几件事。

对于您的错误，它与执行在呈现组件时更改组件状态的函数有关。这将创建一个无限循环，因此不允许。

在render方法中调用函数

3 个答案: