Question

我有一个mixin，它对我的React组件应用了一些辅助功能增强功能。目前它只是尝试智能地将一个元素集中在页面上，这暗示了屏幕阅读器用户已经加载了一个新页面：

import React from "react"

const componentDidMount = () => {
  const autofocus = document.querySelector("main [autofocus]")
  const fakeAutofocus = document.querySelector("main #autofocus")
  const h1 = document.querySelector("main h1")
  if(autofocus)
    autofocus.focus()
  else if(fakeAutofocus) {
    origTabindex = fakeAutofocus.tabIndex
    if(!origTabindex || origTabindex == -1)
      fakeAutofocus.tabIndex = 0
    fakeAutofocus.focus()
    if(!origTabindex)
      fakeAutofocus.tabIndex = -1
    else
      fakeAutofocus.tabIndex = origTabindex
  } else if(h1) {
    h1.tabIndex = 0
    h1.focus()
    h1.tabIndex = -1
  }
}

export default {
  componentDidMount
}

将它混合到我的顶级组件中效果很好。

现在我正在尝试摆脱mixins并切换到包装器组件：

export const Accessible = (component) => {
  return class extends React.Component {
    componentDidMount() {
      componentDidMount()
    }
    render() {
      return component()
    }
  }
}

除了我似乎无法使渲染功能正确。

如果我返回<component/>，则无法渲染。如果我返回component（），我有时会得到一个控制台错误，我直接调用了React组件但不应该。我也很确定这不能正确处理属性。

我有一个Dashboard无状态组件，如下所示：

const Dashboard = () => <Grid fluid={true}>
  <Row>
    <Col md={12}>
      <h1>Dashboard</h1>
    </Col>
  </Row>
  <Row>
    <Col md={6}>
      <LeftPanel/>
    </Col>
    <Col md={6}>
      <RightPanel/>
    </Col>
  </Row>
</Grid>

然后我做了：

export Accessible(Dashboard)

使其可访问。如果我的Accessible组件返回<dashboard/>，则它不会呈现。如果它调用该函数，一切都很好但组件类在包装在Accessible中时失败。我必须有一种更健壮的方法来做到这一点。

感谢。

Answer 1

你不应该返回component()因为组件是反应组件而不是函数。

应return <component />

将mixin重构为包裹组件

1 个答案: