- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
翻译 JSX 版本 React Hooks API 时 demo进入没有 JSX 的一个,如下 react-without-jsx ,我得到了以下代码
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
export function test() {
ReactDOM.render(Count(), document.getElementById('main'));
}
export function Count() {
const e = React.createElement;
const [count, setCount] = useState(0);
const button = e('button', {
onClick: () => {
setCount(count + 1);
},
});
return e('div', null, e('p', `You clicked ${count} times`), button);
}
但是,当在浏览器中运行此代码时,我收到以下错误
react.development.js:1551 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1551)
at Object.useState (react.development.js:1582)
at Count (Count.ts:10)
at Object.test (Count.ts:5)
at main (index.ts:4)
at Object../src/index.ts (index.ts:6)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
resolveDispatcher @ react.development.js:1551
useState @ react.development.js:1582
Count @ Count.ts:9
test @ Count.ts:4
main @ index.ts:3
./src/index.ts @ index.ts:6
__webpack_require__ @ bootstrap:18
如果使用 JSX,上面的示例可以正常工作。
所有功能组件的示例似乎都是基于 JSX 的。那么是否可以在没有 JSX 的情况下使用 React Hook 呢?如果可以的话,我们怎样才能做到呢?
编辑更新:上面的代码仍然有错误(如以下编辑所述)。
e('p', `You clicked ${count} times`)
应该是
e('p', null, `You clicked ${count} times`)
createElement
的第二个参数应该是 props。
按照@qxg的说明进行编辑。
在渲染过程中,我没有使用React.createElement
,通过将代码修改为
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
export function test() {
ReactDOM.render(React.createElement(Count), document.getElementById('main'));
}
// ... Same code for Count as above
函数组件外部调用Hooks API错误已解决!
但是,出现了新的错误,例如:
Warning: Invalid attribute name: `0` react-dom.development.js:82
in p (created by Count)
in div (created by Count)
in Count
Warning: Invalid attribute name: `1` react-dom.development.js:82
in p (created by Count)
in div (created by Count)
in Count
很多像上面这样的错误,以
结尾Warning: Invalid attribute name: `18` react-dom.development.js:82
in p (created by Count)
in div (created by Count)
in Count
页面呈现为
<div>
<p></p>
<button></button>
</div>
因此只有空元素,没有文本。对于这个问题有什么建议吗?
附:我不确定是否存在 typescript/webpack 的配置错误,所以我将其发布在这里。
ts.config.json
{
"compilerOptions": {
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
] /* Specify library files to be included in the compilation. */,
"jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
"sourceMap": true /* Generates corresponding '.map' file. */,
"outDir": "./dist" /* Redirect output structure to the directory. */,
"strict": true /* Enable all strict type-checking options. */,
"noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
"noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.ts',
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
},
],
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
},
],
},
externals: {
react: 'React',
'react-dom': 'ReactDOM',
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="main"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
最佳答案
您手动将 jsx 转换为 React.creatEelement,但也忘记转换顶级元素。
ReactDOM.render(React.createElement(Count), document.getElementById('main'));
关于reactjs - 是否可以在不使用 JSX 的情况下使用 React Hooks API(在 typescript 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61862140/
typescript 抛出: Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 更改后tsconfig.json jsx至 re
我正在尝试使用 JSX 表达式作为另一个 JSX 表达式的生成主体的一部分: render() { return ( {[...Array(5).keys()].
eslint jsx-quotes 规则在 Visual Studio 代码中不起作用。配置: .eslintrc.json: { "plugins": ["jsx"], "parse
如果我声明 var A = new Set(...........); var B = new Set(...........); 是否有 JSX 操作来计算两组 A - B 的差异? 最佳答案
这个问题在这里已经有了答案: How to render react components by using map and join? (18 个答案) 关闭 5 年前。 我遇到过这样的情况,我有
完成执行另一个 .jsx 脚本后,如何让我的 .jsx 脚本? 也许这将有助于理解我正在尝试做的事情: // WebCard.jsx file function mySnippet(){ //
JSX 不允许多次指定一个属性。 F.ex. /* /* where obj contains an attribute called "prop1" */ 属性的顺
我在尝试使用循环数组构建自定义组件时遇到问题,该循环数组有条件地呈现不同的元素。该组件包含特殊的类名,用于生成每行 3 个元素的网格,与传递给组件的参数数量无关。 我正在使用 map用于遍历条件索引,
我有一个要从 JS 转换为 TS 的 React 项目。我遇到的一个问题是 TSX React 假设功能组件中定义的所有属性都是必需的 Prop 。 // ComponentA.tsx class C
我有一个通过数组映射的 React 组件。 每个数组项都有一个可选的 ID 类型。 如果我有这个 ID,我将渲染一个元素,否则什么都不渲染。 这个元素有一个 onClick 调用函数接受 ID 作为参
我目前正在编写一个带有 ref 元素的 StencilJS 组件,我需要将其作为 @Prop 传递给另一个元素。像这样: this.canvas = el}> 创建颜色选择器时,this.canv
我正在尝试将对象传递给 react 中的 jsx 标记的值 我将标签选项的值设置为一个对象 onChange 我得到了标签 中的值并用值设置本地状态 我控制台记录了本地状态,但它返回了 [objec
我正在尝试使用 Chart.js 和 Typescript 在 React 中构建应用程序,但是当尝试渲染折线图时,我在这一行收到上述错误: . 除此之外,我还收到消息“类型‘ChartCompone
我正在使用一个变量来有条件地显示不同的 JSX,并且它没有使用在其父函数中定义的样式。我怎样才能做到这一点? 您可以在此处查看演示:https://codesandbox.io/s/styled-js
使用 Nextjs 和 styled-jsx 我编写了下面的组件。 现在我想知道如何将 styled-jsx 应用于从 getLinks 方法返回的 jsx。 在下面的示例中,来自 getLinks
所以我现在的问题是,如果我有一个 JSX 父组件,但我需要包含一个 html 标签,例如 我认为 React JSX 不支持它(如果我错了请纠正我)我可以混合使用 jsx 和非 jsx 组件吗?我个人
我正在编写一个 react 应用程序来从嵌套对象数组中打印 TreeView 。每个节点都应该是可折叠的(默认打开)。一个节点可以有任意数量的子节点。这是我想要实现的示例: 我正在将所有节点组件收集到
它不是 React 项目,也不是 V-DOM 相关的。我只需要一个 jsx 运行时编译器到 (HTML/XML) 字符串,稍后将用作 element.innerHTML = result 它应该用作支
当 jsx 跨越多行时,哪种 eslint 规则更喜欢前者而不是后者?目前 prettier 正在从 preferred 变为 notPreferred const preferred = (
我正在使用 IDEA 2017.2。我需要设置 JSX codestyle,这样大括号之间就有空格,比如 { event.series } 。但是,它会将其自动格式化为 {event.series}
我是一名优秀的程序员,十分优秀!