Question

您好我想动态加载目录中的多个反应组件。这样有人只需在目录中添加一个组件即可加载它。我正在思考类似的事情：

import * as dynamicComponents from './dynamicComponents';

const toAdd = [] dynamicComponents.forEach(function(component){  
toAdd.push( Route path={component.link} component={component.implmentation} /> })


render(<Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Template}>
        <IndexRoute component={Main} />
        {toAdd}
      </Route>
    </Router>   
   </Provider>,  
  document.getElementById('root') );

这可能吗？

Answer 1

我相信你的第一份进口声明不会在巴贝尔工作。试试这个包：

var Product = require ('../models/products'); 
var sendJsonResponse = function(res, status, content) {
  res.status(status);
  res.json(content);
}
module.exports.createProduct = function (req, res){



  var new_product = new Product();//instance of object (model) product

        new_product.name: req.body.name, 
        new_product.category: req.body.category, 
        new_product.price: req.body.price, 
        new_product.picture: req.body.picture, 
        new_product.quantity: req.body.quantity,
        new_product.status: req.body.status, 
        new_product.date: req.body.date, 
        new_product.description: req.body.description, 
        new_product.owner: req.body.owner

   new_product.save(function(err, addprod) {//save your new product in database

   if (err){

     res.send(err);// error when save

     }

    res.send(addprod);//else return a product add

    });

  };

使用以下命令将其添加到.babelrc中

npm i --save-dev babel-plugin-wildcard

您可能没有在您的环境中使用Babel，但实质上您需要解决从通配符或动态路径加载的问题。这可能是困难的部分。

您还需要确保放入目录的每个文件都将React组件类导出为其默认导出，并且具有返回链接的静态函数。

{
    "plugins": ["wildcard"]
}

然后像下面这样的代码将在编译时工作：

const SomeReactComponent = () => (<p>Rendering something.</p>);

//Export link as static member of the class.
SomeReactComponent.link = '/some/react/component/routing/link';

export default SomeReactComponent;

这是一个编译时解决方案。如果您需要运行时解决方案，请使用ES6导入以外的导入程序进行调查，我认为这不能在运行时动态使用。

如何动态加载多个React组件？

1 个答案: