reactjs - 在 React 16 中使用 require 和 npm 在没有 npm 的情况下创建react-class

标签 reactjs

我正在尝试创建一个独立的 React 示例,而不使用 webpack、npm、JSX 或 babel。由于 React.createClass 已在 React v16 中删除,如何在不使用 require.js 和 npm 的情况下使以下代码工作:

<html>

<head>
    <title>React Hello World</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script>
        window.onload = function () {
            var Greetings = React.createClass(
                {
                    render: function () {
                        return React.createElement('h1', null, 'Greetings, ' + this.props.name + '!');
                    }
                });
            ReactDOM.render(
                React.createElement(Greetings, { name: 'World' }),
                document.getElementById('root')
            );
        };
    </script>
</body>

</html>

最佳答案

create-react-class 的 UMD 构建也可以从 unpkg 获得,就像您对其他库所做的那样:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/create-r<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b1b5b7a0f9b7b8b5a7a794e5e1fae2fae6" rel="noreferrer noopener nofollow">[email protected]</a>/create-react-class.min.js"></script>

您还需要将 React.createClass 的任何实例替换为 createReactClass,详细信息 here .

也就是说,我会考虑一下您是否真的需要 create-react-class - 除 IE 之外的每个主要浏览器现在都支持 ES6 类,因此您并不真正需要Babel 不再使用它们。

关于reactjs - 在 React 16 中使用 require 和 npm 在没有 npm 的情况下创建react-class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47809720/

相关文章:

javascript - Express.js,我新添加的路由出现 404(未找到)错误

javascript - react : Update component data/props after promise resolved

javascript - 将 Props Callback 与 React Native 一起使用

javascript - 流量: How to type an object with variable number of keys?

javascript - 尽管所有数据都正确传递,但 Redux 状态未更新

reactjs - 文本字段 : helperText spanning multiple lines

javascript - 在 React 的图像标签中渲染 css 类

javascript - 在 React 中将状态数组从一个组件传递到另一个组件

reactjs - 无法读取未定义的 react 测试库的属性 'addListener'

javascript - 如何将 typescript 文件导入脚本标签