React提示DOM元素不识别`anyTouched`属性，redux-form嵌入reactstrap modal遇警告

这个问题我太熟啦！本质原因是redux-form的Form组件会自动把一些内部管理状态的props（比如anyTouched）传递给它直接包裹的根组件——也就是你的Reactstrap Modal。但Modal作为和DOM绑定的组件，根本不认识这些redux-form专属的props，所以React就会抛出这个警告。

下面给你两种简单的解决办法：

方法一：用React.Fragment隔离表单props #

这是最省心的方案，不需要修改太多代码，只需要在Modal外面套一层<React.Fragment>（或者简写<>），让redux-form的props传递给Fragment而不是Modal。Fragment不会生成额外的DOM节点，完全不影响页面结构：

import { Form } from 'redux-form';
import { Modal, ModalBody, ModalHeader } from 'reactstrap';

// 修正后的代码
<Form>
  <>
    <Modal isOpen={isModalOpen} toggle={toggleModal}>
      <ModalHeader toggle={toggleModal}>表单弹窗</ModalHeader>
      <ModalBody>
        {/* 你的表单字段，比如Field组件 */}
      </ModalBody>
    </Modal>
  </>
</Form>

方法二：手动过滤传递给Modal的props #

如果不想额外加包裹元素，也可以通过解构赋值，只把Modal需要的props传给它，剩下的props留给Form组件处理：

import { Form } from 'redux-form';
import { Modal, ModalBody } from 'reactstrap';

const MyFormModal = ({ isOpen, toggle, ...formProps }) => {
  return (
    <Form {...formProps}>
      <Modal isOpen={isOpen} toggle={toggle}>
        <ModalBody>
          {/* 表单内容 */}
        </ModalBody>
      </Modal>
    </Form>
  );
};

两种方法都能解决这个警告，个人更推荐第一种，代码改动最少还不影响DOM结构～

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