Reactjs 将道具传递给动态导入的react组件

我做组件的动态导入

let that = this
import('./pathToMyComponent').then(component => {

    // how to pass props to the component here?..
    that.setState({myModule : component.default})

   })

如何将道具传递给组件？ 我将把组件传递给路由器：

<Route path='myPath' component={this.state.myModule}/>

然后在函数中：

GetComponent() {
 let match = {}
 let match.param = {nick : 'userNick'}
  let Component = this.state.module && this.state.module.default
         return this.state.myModule ?  (<Component match={match} />) :  ( 
                  <div>loading...</div>
               )
}

GetComponent（）{
让match={}
让match.param={nick:'userNick'}
让组件=this.state.module&&this.state.module.default
返回this.state.myModule？（）：（
加载。。。
)
}

您需要使用React.lazy或React loadable之类的工具，以下是React文档中的示例：

const OtherComponent=React.lazy（（）=>import（'./OtherComponent'）；
函数MyComponent（）{
返回(
);
}

更多信息请点击此处：

react.lazy：

反应负荷：

正如其他人所说，这是如何动态导入组件，同时仍然能够在代码中使用它。。也就是说，您不必使用

.then（component=>{that.setState…}

逻辑

如果要向路线传递道具，可以执行以下操作：

<Route exact path="/somepath" render={props => <Test {...props} addedProp={val} />} />

}/>

我使用这样一个组件将道具注入到路由中：（这个特定的示例将前面的路由路径添加到道具中，但从技术上讲，您可以在这里注入任何您想要的道具）

使用路由器导出默认值(
类AppBrowserRouterRoutes扩展了React.Component{
状态={
推荐人：“
}
componentDidUpdate（prevProps）{
if（this.props.location.pathname！==prevProps.location.pathname）{
这是我的国家({
推荐人：prevProps.location.pathname
})
}
}
//将旧路线数据注入现有道具中，这样我们就可以看到我们从何而来
addStateToProps=（现有道具）=>{
返回{
…现有道具，//现有道具
…this.state//旧路由数据
}
}
render（）{
返回(
} />
} />
);
}
}
)

可能我也有类似的情况，我需要在单击时加载组件，并向其传递道具或参数

这是我的解决办法

DynamicComponent.js

从“React”导入React；
常量DynamicComponent=（道具、参数）=>{
控制台日志（params）；
控制台日志（道具）；
返回(
可以动态{params}
);
};
导出默认DynamicComponent；

ParentComponent.js

import React，{useState}来自“React”；
常量ParentComponent=（道具）=>{
const[module，setModule]=useState（null）
常量handleClick=（）=>{
设params={userID:123}；
导入（'./DynamicComponent.js'）。然后（（c）=>{
setModule（c.default（props，params））；//在此处发送props或params
});
};
返回(
帕伦斯{params}
负载动态分量
{/*此处呈现动态组件*/}
{模块(
{module}
)：null}
);
};
导出默认DynamicComponent；

React.lazy不适合我。它给出未知元素中的错误。我花了一天的时间试图找出原因，但没有提供任何答案。所以我提出了我在更新中描述的解决方案。您有什么版本的React？您至少需要React版本16.6。

<Route exact path="/somepath" render={props => <Test {...props} addedProp={val} />} />

export default withRouter(
    class AppBrowserRouterRoutes extends React.Component {
        state = {
            referrer: ""
        }

        componentDidUpdate(prevProps) {
            if (this.props.location.pathname !== prevProps.location.pathname) {
                this.setState({
                    referrer: prevProps.location.pathname
                })
            }
        }

        // Inject old route data into existing props so we can see where we came from
        addStateToProps = (existingProps) => {
            return {
                ...existingProps, // existing props
                ...this.state // old route data
            }
        }

        render() {
            return (
                <Switch>
                    <Route exact path="/" render={props => <AppHomePage {...this.addStateToProps(props)} />} />
                    <Route exact path="/companies" render={props => <AppCompanies {...this.addStateToProps(props)} />} />
                </Switch>
            );
        }
    }
)

import React from 'react';

const DynamicComponent = (props, params) => {
  console.log(params); 
  console.log(props); 
  return (
    <h4>May Dynamic {params}</h4>
  );
};

export default DynamicComponent ;

import React, {useState} from 'react';

const ParentComponent= (props) => {
  const [module, setModule] = useState(null)
  const handleClick = () => {
      let params = { userID: 123 }; 
      import('./DynamicComponent.js').then((c) => {
           setModule(c.default(props, params)); // send props or params here
      });
  };
  return (
    <div>
        <h4>parens{params}</h4>
        <button type="button" onClick={handleClick}>Load Dynamic Component</button>

       {/* Render dynamic component here */}
       { module ? (
           <div>{module}</div>
       ) : null }
    </div>
  );
};

export default DynamicComponent ;