Javascript 反应：在<；上的'savehere'属性的值无效；部门>；标签。将其从元素中删除，或传递字符串或数值以将其保留在DOM中

我正在使用props从子组件调用父方法，并收到以下错误：

我向AddGuest子组件传递道具的方式如下：

import React from 'react';
 import globalService from '../services/globalService';

   import '../styles/chairqueue.css';
   import {buttonText,endPoint} from '../constants/global.constants';
   import Modal from 'react-bootstrap/Modal'
   import ModalDialog from 'react-bootstrap/ModalDialog'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalTitle from 'react-bootstrap/ModalTitle'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'
import  { useState, useEffect } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import AddGuest from './addGuest'

class  CreateMeeting extends React.Component {
  constructor(props){
    super(props)
    this.state={
      guestModalShow:false
    }
  }
  as=(a)=>{
    console.log('saasa')
    this.setState({guestModalShow:a});
  }
    asd=(a)=>{
    console.log(a) // works perfectly 

    }

    render(){

    return (

      <Modal
        {...this.props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header >
        <label >Cancel</label>
          <Modal.Title id="contained-modal-title-vcenter">
            New Meeting
          </Modal.Title>
          <label>Create</label>
        </Modal.Header>
        <Modal.Body>
          <h4><input type="text" className="form-control" placeholder="Meeting title"/></h4>
          {/* <DatePicker className="form-control"
        selected={startDate}
        onChange={setStartDate}
      /> */}
      <label variant="primary" onClick={()=>this.as(true)}>
            Add Guest 
          </label>

        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.onHide}>Close</Button>
        </Modal.Footer>
        <AddGuest
        show={this.state.guestModalShow}
        savehere={(a)=>this.asd(a)}
        onHide={() => this.as(false)}

      />
      </Modal>      
    )
    }
  }
  export default CreateMeeting;

从“React”导入React；
从“../services/globalService”导入globalService；
导入“../styles/chairqueue.css”；
从“../constants/global.constants”导入{buttonText，endPoint}；
从“反应引导/模式”导入模式
从“react bootstrap/ModalDialog”导入ModalDialog
从“反应引导/ModalHeader”导入ModalHeader
从“react引导/ModalTitle”导入ModalTitle
从“反应引导/ModalBody”导入ModalBody
从“react bootstrap/ModalFooter”导入ModalFooter
从“反应引导/按钮”导入按钮
从“react”导入{useState，useEffect}；
从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
从“./AddGuest”导入AddGuest
类CreateMeeting扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
GuestModelshow:false
}
}
as=（a）=>{
console.log（'saasa'）
this.setState（{guestModalShow:a}）；
}
asd=（a）=>{
console.log（a）//工作正常
}
render（）{
返回(
取消
新会议
创造
{/*  */}
这是真的。}>
添加客人
接近
这是asd（a）}
onHide={（）=>this.as（false）}
/>
)
}
}
导出默认的CreateMeeting；

My child组件的实现方式如下：

import React from 'react';

import '../styles/chairqueue.css';
import {buttonText,endPoint} from '../constants/global.constants';
import Modal from 'react-bootstrap/Modal'
import ModalDialog from 'react-bootstrap/ModalDialog'
import ModalHeader from 'react-bootstrap/ModalHeader'
import ModalTitle from 'react-bootstrap/ModalTitle'
import ModalBody from 'react-bootstrap/ModalBody'
import ModalFooter from 'react-bootstrap/ModalFooter'
import Button from 'react-bootstrap/Button'
import  { useState, useEffect } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class  AddGuest extends React.Component  {
    constructor(props){
        super(props)
        this.state={
            startDate:new Date(),
            formControls: {
                email: '',
                name: ''

              },
        }
    }

      changeHandler = event => {
        const name = event.target.name;
        const value = event.target.value;

        this.setState({
          formControls: {
            ...this.state.formControls,
            [name]:
              value

          }
        });
      }
      sendData = () => {
          console.log('hhhh--')
        this.props.savehere("Hey Popsie, How’s it going?");
   }
      render(){
      return (
      <Modal  {...this.props} >
        <Modal.Header closeButton>
          <Modal.Title>Add Guest</Modal.Title>
        </Modal.Header>
        <Modal.Body>
        <h4><input type="text" name="name" value={this.state.formControls.name}
                    onChange={this.changeHandler} required className="form-control" placeholder="Guest Name"/></h4>
        <h4><input type="text" className="form-control" name="email" value={this.state.formControls.email}
                    onChange={this.changeHandler} required placeholder="Guest Email"/></h4>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={this.props.onHide}>
            Close
          </Button>
          <Button variant="primary" onClick={()=>this.sendData()}>
            Save 
          </Button>
        </Modal.Footer>
      </Modal>
      );
      }
    }
    export default AddGuest;

从“React”导入React；
导入“../styles/chairqueue.css”；
从“../constants/global.constants”导入{buttonText，endPoint}；
从“反应引导/模式”导入模式
从“react bootstrap/ModalDialog”导入ModalDialog
从“反应引导/ModalHeader”导入ModalHeader
从“react引导/ModalTitle”导入ModalTitle
从“反应引导/ModalBody”导入ModalBody
从“react bootstrap/ModalFooter”导入ModalFooter
从“反应引导/按钮”导入按钮
从“react”导入{useState，useEffect}；
从“反应日期选择器”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
类AddGuest扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
开始日期：新日期（），
表单控件：{
电子邮件：“”，
名称：“”
},
}
}
changeHandler=事件=>{
const name=event.target.name；
常量值=event.target.value；
这是我的国家({
表单控件：{
…this.state.formControls，
[姓名]：
价值
}
});
}
sendData=（）=>{
console.log（'hhh--'）
这个.props.savehere（“嘿，波西，最近怎么样？”）；
}
render（）{
返回(
添加客人
接近
this.sendData（）}>
拯救
);
}
}
导出默认AddGuest；

---

我正在使用react boostrap模态并调用另一个模态。什么问题会导致此错误？

此。asd这是一个函数，不需要再次将其包装到函数中

<AddGuest
     show={this.state.guestModalShow}
     savehere={this.asd}
     onHide={() => this.as(false)}
/>

this.as（false）}
/>

这里的问题是，

组件的非标准输入属性

savehere

，当呈现

AddGuest

时，该属性直接传播到

组件中：

render(){
  return (
    <Modal  {...this.props} > {/*<-- This is problematic, as all props
                                  of AddGuest are spread into Modal
                                  including those not supported by 
                                  Modal such as "savehere"*/}
    ...
    </Modal>)
} 

---

希望有帮助

这是可行的，但我不喜欢，我喜欢能够在我的组件中传播

…道具

，只是为了选择传递任何你想要的道具

render(){
  return (
  <Modal show={this.props.show} onHide={this.props.onHide}>
  ...
  </Modal>)
}