Question

我有一个组件，我想在某些项目中分享/重用。我正在尝试构建/捆绑此组件，因此它不会采取正常反应的大型设置（webpack / babel / npm / ect）。

我想

在html页面的某处包含来自cdn的React / ReactDOM。
包含我的组件js文件（我们将其称为standalone.js）。
将一些初始化代码渲染到dom中。没有Babel，没有Webpack，没有JSX。

这就是全部。

我觉得我已经非常接近，但我仍然坚持第3项。我无法弄清楚如何将我的组件渲染到DOM。

这是demo html页面的相关部分：

index.html （相关部分）

<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>

<!--My Component -->
<script src="build/standalone.js" type="text/javascript"></script>
<script>
     // I believe I'm doing something wrong here
     var myComponent = new MyLibrary.default();
     var myStandaloneElement = React.createElement(myComponent, { message: "Testing Standalone Component" });
     ReactDOM.render(myStandaloneElement, document.getElementById('app'));

</script>

standalone.jsx

import React, {PropTypes} from 'react';

class Standalone extends React.Component {
    render() {
        return <p>{this.props.message}</p>;
    }
}

Standalone.PropTypes = {
    message: PropTypes.string.isRequired
}
export default Standalone;

webpack.config.js （相关部分）

var config = {
    entry: APP_DIR + '/standalone.jsx',
    output: {
        library: 'MyLibrary',
        libraryTarget: 'umd',
        path: BUILD_DIR,
        filename: 'standalone.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel'
            }
        ]
    },
    externals: {
        react: 'React',
        "react-dom": 'ReactDOM'
    },
}

尝试使用基本的html渲染组件时，我尝试了很多类似的东西。查看我的调试器，我可以告诉对象是“关闭”的对象。到反应型对象。我只是不知道如何处理它。

赞赏任何指针

Answer 1

您不应使用new实例化组件，而应使用React.createElement factory实例化它们。所以你只需要将元素类/函数的引用传递给createElement，参见yout html的修改部分：

 ...
 // get reference to my component constructor
 var myComponent = MyLibrary.default;
 var myStandaloneElement = React.createElement(myComponent, { message: "Testing Standalone Component" });
 ReactDOM.render(myStandaloneElement, document.getElementById('app'));
 ...

另一方面，为了简化开发过程中的调试（并且只在开发中！）我建议使用非缩小版本的react.js和react-dom.js，它们位于node_modules下，例如：

<script src="/node_modules/react/dist/react.js"></script>
<script src="/node_modules/react-dom/dist/react-dom.js"></script>

Answer 2

您可能需要考虑将React组件公开为Web组件，例如使用https://www.npmjs.com/package/reactive-elements

<body>
  <my-react-component item="{window.someValue}"></my-react-component>
</body>

使用Webpack的独立React组件

2 个答案: