Javascript TypeError:无法读取属性'；焦点'；空的

我有一个反应组件如下。当我为下面的组件执行测试用例时，我得到了下面的错误，尽管在浏览器上我看到生成了元素，并且编译时没有错误

错误：

TypeError:无法读取null的属性“focus”

  at Check.componentDidMount (src/components/Payments/Check.js:42:42)
  at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:262:25
  at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:73:12)
  at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:261:11
  at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:74:22)
  at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:34:26)
  at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:207:25)
  at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:154:16)
  at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:67:27)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:141:20)
  at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:60:26)

Check.js

export default class Check extends Component {
  static displayName = 'Check';

  static propTypes = {
    check: PropTypes.object,
    translate: PropTypes.func.isRequired,
    countries: PropTypes.object,
    states: PropTypes.object,
    setCheckState: PropTypes.func.isRequired
  };

  onChange = (fieldName, newValue) => {
    let sanitizedFieldName = fieldName.replace('selected', '');
    sanitizedFieldName = sanitizedFieldName.charAt(0).toLowerCase() + sanitizedFieldName.substr(1);
    const newCheckState = {
      ...this.props.check,
      [sanitizedFieldName]: newValue
    };
    this.props.setCheckState(newCheckState, sanitizedFieldName === 'country');
  }

  componentDidMount() {
    document.getElementById('mainHeader').focus();
  }

  render() {
    const { translate, check, countries, states } = this.props;
    const parentType = 'check';
    const stateObj = states[check.country] || { optionArray: [] };

    return (
        <div>
          <div tabIndex="0" id="mainHeader"><h1 {...resolve(CheckStyles, 'mainHeader')}>
            {translate('PanelPaymentsCheckHeaderText')}
          </h1></div>
          <div {...resolve(CheckStyles, 'bankInfoContainer')}>
            <h3 {...resolve(CheckStyles, 'bankAccountHeader')}>
              {translate('PanelPaymentsCheckSubHeaderText')}
            </h3>
            ........
            ........                
          </div>
        </div>
    );
  }
}

导出默认类检查扩展组件{
静态显示名称='检查'；
静态类型={
检查：PropTypes.object，
translate:PropTypes.func.isRequired，
国家：PropTypes.object，
状态：PropTypes.object，
setCheckState:PropTypes.func.isRequired
};
onChange=（字段名，newValue）=>{
让sanitizedFieldName=fieldName.replace（'selected'，''）；
sanitizedFieldName=sanitizedFieldName.charAt（0）.toLowerCase（）+sanitizedFieldName.substr（1）；
常量newCheckState={
…这个。道具。检查，
[sanitizedFieldName]：newValue
};
this.props.setCheckState（newCheckState，sanitizedFieldName=='country'）；
}
componentDidMount（）{
document.getElementById（'mainHeader'）.focus（）；
}
render（）{
const{translate，check，countries，states}=this.props；
const parentType='check'；
const stateObj=状态[check.country]|{optionArray:[]}；
返回(
{translate（'PanelPaymentsCheckHeaderText'）}
{translate（'PanelPaymentsCheckSubHeaderText'）}
........
........                
);
}
}

尝试使用

ref

代替

id

，即

componentDidMount() {
  this.refs.mainHeader.focus();
}

---

我添加了空检查以消除错误。这真是个愚蠢的错误

componentDidMount() {
  if(this.refs.mainHeader){
  this.refs.mainHeader.focus();
   }
}

---

您不应该在ReactJS应用程序中使用id，也不应该直接访问DOM，因为ReactJS管理所有这些。您应该使用提供的API，如refs或findDOMNode。您认为

focus（）

应该如何适用于

呢？我如您所述做了，但仍然得到相同的错误是您发布的

渲染是最新的吗？ref不存在的唯一方法是有条件地呈现
mainHeader
componentDidMount() {
  if(this.refs.mainHeader){
  this.refs.mainHeader.focus();
   }
}