javascript - React.js - 将 Prop 从 hoc 传递给 child

Question

我一直在尝试将我的 HOC 中的一些 Prop 传递给 children 。 HOC 包装了 React 路由器开关和路由。子组件中缺少 Prop 。我利用 React.CloneElement 为 child 添加 Prop ，但似乎不起作用

<BrowserRouter>
<Layout>
        <React.Suspense fallback={loading()}>
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/dashboard" component={Home} />
            <Route path="/tickets" component={Tickets} />

          </Switch>
        </React.Suspense>
      </Layout>
    </BrowserRouter>

this is the HOC(layout)

class Layout extends React.Component {
   .....

    render() {
        const children = this.props.children && React.cloneElement(this.props.children, { data: 'ok' })
...

子组件没有得到 data 属性，我只得到这个

{history: {…}, location: {…}, match: {…}, staticContext: undefined}

Answer 1

将 data prop 注入(inject)基础组件的工作 HOC 示例。

/* HOC */
const withData = Base => () => <Base data="ok" />

/* Component */
class Router extends React.Component {
  render() {
    return this.props.data;
  }
}
 
const RouterWithData = withData(Router); // export default withData(Router);

ReactDOM.render(<RouterWithData />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>