父组件和子组件之间的传递函数问题答案

【问题标题】：passing function between a parent component and child component problem父组件和子组件之间的传递函数问题
【发布时间】：2020-07-08 05:45:24
【问题描述】：

我正在尝试将一个函数从父组件传递给子组件，我知道它是如此基本，但是有一个我无法弄清楚的问题。每次我尝试将道具传递给子组件时，都会出现此错误：

Line 37:52:  Parsing error: Unexpected token

  35 |             <div className="event-list">
  36 |             <button  onClick={this.handleForm} className='event-list__button'>Create Event</button>
> 37 |                 {this.state.formOpen && < formClose={this.handleFormClose} EventForm/>}
     |                                                    ^
  38 | 
  39 |             </div>
  40 |         )

我的父组件：

从 'react' 导入 React，{ Component }

导出类 eventList 扩展组件 { 构造函数（道具）{ 超级（道具）这个.state={ 表单打开：假 } };

handleForm=()=>{
    this.setState({formOpen:true})
}
handleFormClose=()=>{
    this.setState({formOpen:false})
}

render() {
    return (
        <div className="event-list">       
        <button  onClick={this.handleForm} className='event-list__button'>Create Event</button>
            {this.state.formOpen && < formClose={this.handleFormClose} EventForm/>}

        </div>
    )
}

}

导出默认事件列表

我的子组件

import React from 'react'

const eventForm =(props)=>{

    return (
        <div>
             <form  className="event__form"action="POST">
            <input name="hostName"type="text" placeholder="who is host?" required/>
            <input type="date" name="date" id="date" required/>
            <input type="text" name="address" placeholder="event address" required/>
            <input type="textArea" name="description" id="description" placeholder="description" required maxLength='60' rows='2'/>
            <div className='event__form__buttons'>
            <button type="submit">Submit</button>
            <button onClick={props.formClose} >Cancel</button>
            </div>

        </form>
        </div>
    )

}

导出默认事件表单

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

那是因为您缺少组件名称并将其放在末尾。你应该这样做：

 {this.state.formOpen && <EventForm formClose={this.handleFormClose} />}

【讨论】：

【解决方案2】：

那是解析错误，应该是：

<EventForm formClose={this.handleFormClose} />

【讨论】：

【解决方案3】：

你不能写这样的标签：

< formClose={this.handleFormClose} EventForm/>

标签遵循严格的格式：

<TagName property1 property2 />
<TagName property1 property2 ></TagName>

正确的写法：

<EventForm formClose={this.handleFormClose}/>

【讨论】：