代码之家 › 专栏 › 技术社区 › Asad

React无法识别DOM元素上的“Ssavehere”属性。如果你有意让它作为自定义属性出现在DOM中,

react-bootstrap bootstrap-modal reactjs javascript

Asad · 技术社区 · 5 年前

我使用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;

我的子组件实现为:

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 boostrap模态并调用另一个模态。导致此错误的问题是什么?

0 回复 | 直到 5 年前

Dacre Denny 5 年前

这里的问题是,非标准输入道具 savehere 你的 <AddGuest/> 直接扩散到 <Modal/> 组件时 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>)
}

而不是将道具直接传播到 Modal ,考虑 only applying the props 那个 模态 组件支持。对于您的情况,一个简单的解决方案是明确指定 show 和 onHide 道具传递给 添加客人 :

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

希望这能有所帮助!

frank wang 3 年前

我也遇到了这个问题,并通过对象解构解决了它

const {savehere, ...others} = props

return (
    <Modal ...others/>
)

使用变量 savehree 存储回调函数,并使用变量其他存储将传递给<模态/>

AlexJeffcott 3 年前

一般来说,这是由于意外地将非dom属性添加到dom元素(在本例中为div)中造成的。

如果你查看div的规范,我怀疑你不会发现“savehree”已定义。因此,“savehre”对div元素没有影响。

您可以通过mdn页面看到可以传递给这些元素的属性(链接如下,但您可以直接去那里搜索)。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

因此,可以说这是react bootstrap的Modal组件的一个错误,该组件似乎将所有道具传递给ModalDialog,并将道具传递给某个地方。

在你这边,你可以通过只传递你想提供的道具和重新制定你的方法来“解决”这个问题。

在React世界中似乎无处不在的一般且相当干净的做法(由linter默认值推动,用于文档和指南等中的示例代码)是:

将这组非常简单的组件重构为函数
在组件定义处破坏你的道具
只传递您需要的变量
将处理程序保留在父级

因此,父组件看起来像:

const CreateMeeting = ({modalProp1, modalProps2, whatever}) => {
  const [guestModalShow, setGuestModalShow] = useState(false)
  const handleSaveClick = () => {
    console.log('clicked')
  }
  const closeModal = () => setGuestModalShow(false)

  return (
      <Modal
        modalProp1={modalProp1}
        modalProps2={modalProp2}
        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>
       <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={guestModalShow}
          savehere={handleSaveClick}
          onHide={closeModal}
        />
      </Modal>      
    )
    }
  }```

Bender 2 年前

对于reactbootstrap,你可能仍然会分散道具(我使用的是函数式组件,react 18.1.0和typescript)

<CustomModal handleshow={setCustomModalShow}/> <-- from the parentcomponent with customprop (here a ReactSetAction from usestate())

自定义模态组件:

CustomModal = (props:
    JSX.IntrinsicAttributes &
    Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,
        HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> &
    { ref?: ((instance: HTMLDivElement | null) => void) | 
    RefObject<HTMLDivElement> | null | undefined; },
        BsPrefixProps<"div"> & ModalProps> &
    BsPrefixProps<"div"> &
    ModalProps &
    { children?: ReactNode; }, //all the types from a React-Bootstrap-Modal
    handleshow: (e: boolean) => void // followed by the customprop and its type
    ) => {
         return(
            <Modal {...{ ...props, handleshow: handleshow }} >
            ...modalstuff here
            <Modal/>)
            }

OP的错误消失了(它按预期工作,但错误突然出现)。

-1

Alexander 5 年前

this as d 这是一个函数,您不需要再次将其封装在函数中。

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