React 15.6.1使用react-to-print遇ref问题，求替代方案

你遇到的Uncaught TypeError: Cannot read property 'focus' of null错误，本质是react-to-print尝试访问的DOM元素引用（this.componentRef）为null，说明ref没有正确绑定到目标元素，或者触发打印时元素还未完成挂载。结合React 15.6.1的特性，我给你几个可行的解决方案：

1. 使用React 15支持的字符串Ref（最简单的适配方式） #

React 15.6.1依然支持字符串格式的ref，这种写法更直接，也能避免回调ref可能出现的绑定问题：

class YourPrintComponent extends React.Component {
  render() {
    return (
      <div>
        <ReactToPrint 
          trigger={() => <a href='#'>Хэвлэх</a>} 
          // 直接通过this.refs访问目标元素
          content={() => this.refs.printContent} 
        />
        {/* 用字符串ref标记需要打印的元素 */}
        <div ref="printContent">
          <MuiThemeProvider>
            <div style={styles.container}>
              {this.renderProblems()}
            </div>
          </MuiThemeProvider>
        </div>
      </div>
    );
  }
}

2. 优化回调Ref的绑定逻辑 #

如果你更倾向于用回调ref，建议在构造函数中提前定义ref绑定函数，避免render中创建新函数导致的重复赋值问题：

class YourPrintComponent extends React.Component {
  constructor(props) {
    super(props);
    this.componentRef = null;
    // 在构造函数中绑定ref赋值函数，确保this指向正确
    this.setPrintRef = (el) => {
      this.componentRef = el;
    };
  }

  render() {
    return (
      <div>
        <ReactToPrint 
          trigger={() => <a href='#'>Хэвлэх</a>} 
          content={() => this.componentRef} 
          // 可选：添加打印前的校验，避免ref为null时报错
          onBeforeGetContent={() => {
            if (!this.componentRef) {
              console.warn("打印元素还未挂载");
              return false;
            }
          }}
        />
        <div ref={this.setPrintRef}>
          <MuiThemeProvider>
            <div style={styles.container}>
              {this.renderProblems()}
            </div>
          </MuiThemeProvider>
        </div>
      </div>
    );
  }
}

3. 确保react-to-print版本兼容React 15 #

注意：新版本的react-to-print（比如3.x及以上）依赖React 16+的API（如createRef、forwardRef），React 15.6.1不支持这些特性。请安装适配React 15的旧版本，比如：

npm install react-to-print@2.14.10 --save

关键注意点 #

• 触发打印的时机要确保目标元素已经完成挂载，避免在组件初始化阶段就调用打印；
• 如果你的组件是动态渲染的（比如依赖异步数据），要确保数据加载完成后再显示打印按钮，避免ref还未赋值。

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