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

Posted 2023-02-16

【中文标题】父组件和子组件之间的传递函数问题

【英文标题】：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>
    )

导出默认事件表单

【参考方案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/>