当前位置: 首页 > 面试题库 >

Webpack包导出中的React组件库可在运行时渲染中使用

施宏大
2023-03-14
问题内容

我正在升级旧版web2py(python)应用程序以使用react组件。我正在使用webpack将jsx文件转换为缩小的js包。我希望能够使用:

ReactDOM.render(
  <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-container')
);

捆绑软件中包含ComponentA,而web2py视图中包括了捆绑软件。问题是我无法在视图中访问ComponentA。以下示例将起作用:

<script>
var ComponentA = React.createClass({
     render: function() {
      var p = React.createElement('p', null, 'Passed these props: ',this.props.arg1, ' and ', this.props.arg2);
      var div = React.createElement('div', { className: 'my-test' }, p);
      return div;
  }
});

var component = React.createElement(ComponentA, {arg1:"hello", arg2:"world"})
ReactDOM.render(
  component,//I would rather use <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-sample')
);

</script>

我看了exports-loader和webpack-add-module-
exports,
但还没有开始工作。任何帮助是极大的赞赏。


问题答案:

首先,请确保您的main.jsx文件(将导入所有组件)也将它们导出:

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentA from './components/A';
import ComponentB from './components/B';
import style from '../stylesheets/main.scss';

// This is how every tutorial shows you how to get started.
// However we want to use it "on-demand"
/* ReactDOM.render(
  <ComponentA arg1="hello" arg2="world" />,
  document.getElementById('react-container')
);*/

// ... other stuff here

// Do NOT forget to export the desired components!
export {
  ComponentA,
  ComponentB
};

然后确保您output.library
在文件中使用(文档中的“更多”信息)webpack.config.js

module.exports = {
    entry: {
        // 'vendor': ['bootstrap', 'analytics.js'],
        'main': './src/scripts/main.jsx'
    },
    output: {
        filename: './dist/scripts/[name].js',
        library: ['App', 'components'] 
// This will expose Window.App.components which will 
// include your exported components e.g. ComponentA and ComponentB
    }
// other stuff in the config
};

然后在web2py视图中(确保包括构建文件,例如main.js和适当的容器):

<!-- Make sure you include the build files e.g. main.js -->
<!-- Some other view stuff -->
<div id="react-component-a"></div>
<div id="react-component-b"></div>
<script>
// Below is how it would be used. 
// The web2py view would output a div with the proper id 
// and then output a script tag with the render block.
ReactDOM.render(
  React.createElement(App.components.ComponentA, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-a')
);

ReactDOM.render(
  React.createElement(App.components.ComponentB, {arg1:"hello", arg2:"world"}),
  document.getElementById('react-component-b')
);
</script>

注意: 我决定在视图中使用Vanilla React而不是JSX,因此无需在浏览器中进行其他转译。



 类似资料:
  • 嗨,我是新来的反应本机和尝试渲染组件调用一个函数内渲染,但它似乎不工作。 我的职能: 如果我这样做,效果会更好: 但不是这个: 我不明白为什么第二个代码不起作用

  • 问题内容: 是否可以从外部源获取HTML / JSX内容并在React中动态呈现它?在我们的例子中,我们想从Wordpress API中获取内容,并在客户端和服务器上都进行渲染(我们正在使用NextJS) 因此,Wordpress API返回一个JSON响应,其中包括一个content属性,该属性是一串HTML / JSX。内容看起来像这样。 因此,如您所见,它将是HTML和React组件/ JS

  • 问题内容: 这是我的组件代码的片段: 但是,当我运行此代码时,在出现意外的令牌错误。为什么会发生这种情况,我该如何解决? 问题答案: 您必须将方法调用包装在JSX元素中,否则Babel不会将return语句识别为JSX或在这种情况下为内联JSX表达式。它不会将您的代码从JSX转换为纯JavaScript,因此会出现错误。实际上,它被解释为 对象文字 ,而不是您期望的内联JSX表达式: 解决方案是将

  • 问题内容: 我有一个组件,该组件获取作为道具的项目集合,并将其作为呈现为父组件子项的组件集合。我们使用以字节数组形式存储的图像。在函数中,我从项目中获取图像ID,并异步调用,以获取图像的字节数组。我的问题是我不能将诺言传播到React中,因为它不是设计来处理渲染中的诺言的(无论如何我还是不能说的)。我来自背景,所以我猜我在寻找类似关键字的内容来重新同步分支代码。 该函数看起来像这样(简化): 该方

  • 问题内容: 我在尝试使用数据数组呈现元素时遇到问题。在的下面的代码中,可以正常工作,但列表项未出现。 我究竟做错了什么?请随时指出并非最佳做法的任何内容。 问题答案: GoshaArinich是正确的,您应该返回您的元素。但是,在这种情况下,您应该在浏览器控制台中收到讨厌的红色警告 数组或迭代器中的每个子代都应具有唯一的“键”道具。 因此,您需要在列表中添加“键”: 或使用es6 箭头功能放下并做

  • 我有一个组件,它获取作为道具的项目集合,并将它们映射到作为父组件的子组件呈现的组件集合。我们使用存储在WebSQL中的图像作为字节数组。在函数中,我从项中获取图像ID,并对进行异步调用,以获取图像的字节数组。我的问题是,我不能在React中传播这个promise,因为它不是为了处理渲染中的promise而设计的(至少我可以告诉你)。我来自一个背景,所以我想我正在寻找类似于关键字的东西来重新同步分支