redux-form表单值展示问题：redux-form-website-template版本兼容求助

我来帮你解决这个问题，其实redux-form-website-template本质上是Redux Form官网示例专用的辅助包，并不是为生产环境设计的正式依赖，所以新版本出现兼容性问题很正常。这里有几个可行的解决办法：

1. 自己实现Values组件（最推荐的方案） #

Values的核心功能就是从Redux Store中读取指定表单的当前值并格式化展示，完全可以自己写一个轻量组件，彻底摆脱对那个模板包的依赖。这样既不会有版本兼容问题，也能自定义展示样式。

示例代码如下：

import React from 'react';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

// 自定义的Values组件
const Values = ({ formValues }) => (
  <div style={{ margin: '1.5rem 0', padding: '1rem', border: '1px solid #eaeaea', borderRadius: '4px' }}>
    <h3>当前表单状态：</h3>
    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
      {JSON.stringify(formValues, null, 2)}
    </pre>
  </div>
);

// 从Redux Store中获取指定表单的所有值
const mapStateToProps = (state, ownProps) => {
  const selector = formValueSelector(ownProps.form);
  // 用'*'获取整个表单的所有字段值
  const formValues = selector(state, '*');
  return { formValues };
};

export default connect(mapStateToProps)(Values);

使用方式和你原来的完全一样：

<Values form="birthchartform" />

2. 消除旧版本的propTypes警告 #

如果暂时不想自己实现，继续用0.0.41版本的话，可以处理那些propTypes弃用警告：

• 开发环境：可以在React开发者工具的设置中，勾选"Hide PropTypes warnings"来忽略这类警告（适合临时调试）
• 生产环境：安装@babel/plugin-transform-react-remove-prop-types插件，在Babel配置中启用它，编译时会自动移除propTypes相关代码，彻底消除警告。

3. 尝试修复新版本的报错（不推荐） #

如果非要用新版本的redux-form-website-template，可以先检查你的React、Redux和Redux Form版本是否和该包的依赖版本匹配。另外，这个报错大概率是新版本中DOM操作逻辑出了问题（比如试图访问一个未挂载元素的parentNode），你可以查看该包的仓库Issue区，看看有没有其他用户遇到同样问题并给出修复方案，或者自己fork仓库修改对应的DOM操作代码。不过因为这个包是官网示例专用，维护可能不及时，这个方案性价比不高。

总结来说，自己实现Values组件是最稳妥、灵活的选择，完全能替代原组件的功能，还能避免各种依赖问题。

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