reactjs - 警告：React 无法识别 DOM 元素上的 `FirstName` 属性

Question

打开模式窗口时出现标题错误。我也遇到了 LastName 和 PhotoFileName 的相同错误。

该文件名为“EditEmpModal.js”，如下所示：

import React, {Component} from 'react';
import {Modal, Button, Row, Col, Form, Image} from 'react-bootstrap';

export class EditEmpModal extends Component {
  constructor(props){
    super(props);
    this.state={deps:[]};
    this.handleSubmit=this.handleSubmit.bind(this);
    this.handleFileSelected=this.handleFileSelected.bind(this);
  }

  componentDidMount(){
    fetch(process.env.REACT_APP_API+'department')
    .then(response=>response.json())
    .then(data=>{
        this.setState({deps:data});
    });
  }

  render() {
    return (
        <div className="container">
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered>

                <Modal.Header>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Edit Employee
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row>
                        <Col sm={6}>
                            <Form onSubmit={this.handleSubmit}>
                                <Form.Group controlId="id">
                                    <Form.Label>ID</Form.Label>
                                    <Form.Control type="text" name="id" required placeholder="id" disabled defaultValue={this.props.id} />
                                </Form.Group>

                                <Form.Group controlId="FirstName">
                                    <Form.Label>FirstName</Form.Label>
                                    <Form.Control type="text" name="FirstName" required placeholder="FirstName" defaultValue={this.props.FirstName} />
                                </Form.Group>

                                <Form.Group controlId="LastName">
                                    <Form.Label>LastName</Form.Label>
                                    <Form.Control type="text" name="LastName" required placeholder="LastName" defaultValue={this.props.LastName} />
                                </Form.Group>

                                <Form.Group controlId="email">
                                    <Form.Label>Email</Form.Label>
                                    <Form.Control type="email" name="email" required placeholder="Email" defaultValue={this.props.email} />
                                </Form.Group>

                                <Form.Group controlId="userlevel">
                                    <Form.Label>Userlevel</Form.Label>
                                    <Form.Control as="select" name="userlevel" required placeholder="userlevel" defaultValue={this.props.userlevel}>
                                        <option value="9">9</option>
                                        <option value="5">5</option>
                                        <option value="1">1</option>
                                    </Form.Control>
                                </Form.Group>
                                <hr />
                                <Form.Group>
                                    <Button variant="primary" type="submit">
                                        Update Employee
                                    </Button>
                                </Form.Group>
                            </Form>
                        </Col>

                        <Col sm={6}>
                            <Image width="200px" height="200px" src={process.env.REACT_APP_PHOTOPATH+this.props.PhotoFileName} />
                            <input onChange={this.handleFileSelected} type="File" />
                        </Col>
                    </Row>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="danger" onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
  }
}

对于代码量，我深表歉意。我试图删除似乎与问题无关的所有内容。

有谁看到问题以及如何解决它？

标签： reactjsdomreact-routerreact-hooks

Answer 1

这只是 React 告诉你，你传递的原生 DOM 元素的 prop 不存在，所以你不应该期望它做任何事情。

当您盲目地将所有道具传递给一个元素时，您通常会看到此消息。这种模式有时很有用，但通常我发现明确传递它需要的东西会更好。这是你正在做的地方：

<Modal
  {...this.props} // <-- All props are passed to Modal
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>

为了弄清楚为什么这会警告您，我们必须探索react-bootstrap.

Modal将它没有明确期望的所有道具传递给Dialog组件。您可以在 GitHub中查看。

<Dialog
  {...props} // react-bootstrap does the same thing here
  onMouseDown={handleDialogMouseDown}
  className={dialogClassName}
  contentClassName={contentClassName}
>

然后对最终渲染在这里Dialog做同样的事情。div

<div
  {...props}
  ref={ref}
  className={classNames(
    dialogClass,
    className,
    size && `${bsPrefix}-${size}`,
    centered && `${dialogClass}-centered`,
    scrollable && `${dialogClass}-scrollable`,
    fullscreen && fullScreenClass,
  )}
>

因此，任何预期Modal或Dialog不预期的道具（如 API 文档中所定义）都将传递给底层的div.

Adiv不使用或期望 props FirstName, LastName, orPhotoFileName并因此警告您。