Javascript 为什么可以'；我不能在React中呈现之前声明一个函数吗？

因此，我的代码可以工作，但如果我将handleClick（）移动到渲染，它将抛出一个错误。如果我尝试声明一个函数，如

var handleClick=（）=>{
this.setState（{reservationVisible:true}）
console.log（this.state.reservationVisible）}

外部渲染

另外，当我将

handleClick（）

作为道具传递时，我需要调用

{this.handleClick.bind（this）}

并且当我使用在render中声明的函数时，

{handleClick.bind（this）

就足够了。我真的不明白为什么。我应该在哪里声明函数？在渲染外部还是内部？我应该使用函数还是方法

这是我的密码：

import React, { Component } from 'react';
import Room from './Room'
import Form from './Form'

class Rooms extends Component {

  constructor(props){
    super(props);
    this.state = {reservationVisible: false}
  }

    handleClick(e){
        this.setState({reservationVisible: true})
        console.log(this.state.reservationVisible)
      }

  render(){


      let rooms = [
        {
          roomNumber: '1',
          type: 'Cool room',
          price: '130 $',
          goods: ['radio', 'phone']
        },
        {
          roomNumber: '2',
          type: 'Cozy Room ',
          price: '165 $',
          goods: ['radio', 'phone, tv']
        },
        {
          roomNumber: '3',
          type: 'Dirty Room',
          price: '130 $',
          goods: ['balcony', 'phone']
        },
        {
          roomNumber: '4',
          type: 'Like Real Dirty Room',
          price: '90 $',
          goods: ['fridge', 'phone', 'balcony']
        }
      ]

      let getElements = (room, i) => {
        return(
          <Room
            key={i}
            roomNumber={room.roomNumber}
            type={room.type}
            price={room.price}
            goods={room.goods.map(good => good + ", ")}
            onClick={this.handleClick.bind(this)}
          />
        )
      };
      let roomsMapped = rooms.map(getElements);

    return(
      <div>
        {roomsMapped}
      </div>
    )
  }
}

export default Rooms

import React，{Component}来自'React'；
从“./房间”导入房间
从“./Form”导入表单
教室扩展组件{
建造师（道具）{
超级（道具）；
this.state={reservationVisible:false}
}
handleClick（e）{
this.setState（{reservationVisible:true}）
console.log（this.state.reservationVisible）
}
render（）{
出租房间=[
{
房间号：“1”，
类型：'凉爽的房间'，
价格：'130美元'，
货物：[“收音机”、“电话”]
},
{
房间号：“2”，
类型：“舒适房间”，
价格：'165美元'，
商品：[“收音机”、“电话、电视”]
},
{
房间号：“3”，
类型：“脏房间”，
价格：'130美元'，
商品：[“阳台”、“电话”]
},
{
房间号：“4”，
键入：“像真正的脏房间一样”，
价格：'90美元'，
商品：[“冰箱”、“电话”、“阳台”]
}
]
让getElements=（房间，i）=>{
返回(
好的+“，”}
onClick={this.handleClick.bind（this）}
/>
)
};
let roomsMapped=rooms.map（getElements）；
返回(
{roomsmap}
)
}
}
导出默认房间

房间的组成部分呢

import React, { Component } from 'react';


class Room extends Component{
  render(){
    return (
      <div className="room">
        <div className="image"><h1>Image nr {this.props.roomNumber}</h1></div>
        <div className="buttonGroup">
          <div className="button galleryButton">Gallery</div>
          <div className="button reserve" onClick={this.props.onClick.bind(this)}> I'll take it</div>
        </div>
        <div className="info">
          <div className="topInfo">
            <span className="left">{this.props.type}</span>
            <span className="right">{this.props.price}</span>
          </div>
          <div className="additional">
            {this.props.goods}
          </div>
        </div>
      </div>
    )
  }
}

export default Room

import React，{Component}来自'React'；
教室扩展组件{
render（）{
返回(
图像编号{this.props.roomNumber}
画廊
我要了
{this.props.type}
{this.props.price}
{this.props.goods}
)
}
}
导出默认房间

请记住，在

JSX

中，任何JavaScript（在

render（）返回

中）都必须包装在

{}

中。您的类函数应该在render之外声明，就像在您的示例中一样。@Dan好吧，知道也很好，因为我还没有找到一个直接的答案。但是我更关心的是这个问题中的函数和方法，你可以编写一个React函数，不用箭头函数。您还可以使用箭头函数编写它们（只需去掉

var

关键字）。当使用箭头函数时，您不需要使用

.bind（this）

，因为箭头函数的作用域是词汇性的，这意味着它们在本例中使用父作用域，即

房间

。使用

bind（）

将此函数的上下文更改为

Rooms

，并在类上注册函数。如果没有绑定，

这个

在你的函数中等于

未定义的

。你将一个函数从

房间

传递到

房间

，你就是通过引用传递它。在组件上注册函数时，您的

Rooms

组件需要

.bind（）

。然后，您将使用

道具

通过引用传递函数，在

房间内

您只需调用

我就可以了

。调用道具室

onClick

可能会有点混乱！如果您有

Chrome

下载

React Dev Tools

，您可以检查您的组件、它们的道具和状态，以减轻任何混乱。