React打开Modal时报错：DOM元素无法识别FirstName等prop如何修复？

问题根因 #

你调用EditEmpModal组件时，将员工业务字段FirstName、LastName、PhotoFileName和模态窗控制属性（如show、onHide）一起作为props传入了组件，而你在React-Bootstrap的Modal组件上直接使用{...this.props}做了全量透传。
Modal组件最终会渲染为原生DOM元素，这些自定义业务字段不属于原生DOM支持的标准属性，React检测到非标准属性被挂载到DOM上时就会抛出你看到的警告。

修复方案 #

方案1（推荐，改动最小）：显式传递Modal需要的控制属性，不全量透传 #

将Modal标签上的{...this.props}替换为模态窗实际需要的控制属性即可：

<Modal
    show={this.props.show}
    onHide={this.props.onHide}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered>

改完后原有业务逻辑不需要做任何调整，警告会直接消失。

方案2：过滤自定义属性后再透传 #

如果需要支持传入更多Modal原生属性，可以先把自定义业务字段解构过滤后再透传剩余属性：

render() {
    // 先提取所有自定义业务字段，剩余属性都是Modal支持的原生属性
    const { FirstName, LastName, PhotoFileName, id, email, userlevel, ...modalProps } = this.props;
    return (
        <div className="container">
            <Modal
                {...modalProps}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered>
                {/* 后续原有代码保持不变，读取业务字段直接用上面解构的变量即可，比如FirstName代替this.props.FirstName */}

内容的提问来源于stack exchange，提问作者John Beasley