问题标签 [react-jsx]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4794 浏览

reactjs - ReactJS 和 JSX - 我可以有不受控制的复选框吗?

在 React 中,我可以通过使用defaultValue属性来获得不受控制的文本输入。但是,复选框没有这样的属性(只有checked,这使得它受到控制)。我有一个带有很多复选框的巨大表单,但用户无法更改它们!可能我可以使用双向数据绑定 mixin,但文档建议不要使用它们,所以我被卡住了。

0 投票
2 回答
2625 浏览

reactjs - JSX 转换器使用 React.createElement("h1", null) 而不是 React.DOM.h1(null)

JSX 转换器导致错误

当我使用react-tools的转换器转换我的反应文件时

或者当我使用grunt-react转换时

我的生产文件中断,因为转换使用React.createElement并且错误表明此函数未定义。

转换为:

代替:

实时转换器工作正常,因为它使用React.DOM.h1(null, this.state.title). 这行代码配合react很好用,但是React.createElement()函数不起作用,找不到。

如何强制我的自动转换器(无论是 JSX 还是 grunt)转换为React.DOM.h1(null)而不是React.createElement(h1, null). 转换器为什么要使用这个功能?

0 投票
2 回答
2543 浏览

javascript - 将多个 .jsx 文件编译成一个 .js 文件

有没有办法一步将多个reactjs.jsx文件编译成一个.js文件?

就像是:

jsxtool compile ./src/*.jsx --out app.js

谢谢。

0 投票
1 回答
5484 浏览

reactjs - React JSX 和 FirstSibling 或 FirstChild

我正在尝试使用 Reach JSX 做一些对 JQuery 来说很简单的事情,但我无法在 JSX 中弄清楚。我已经尽可能地简化了这个例子,问题归结为:

我正在渲染许多选项卡标题,并且我希望第一个选项卡以特定的类名呈现,以便我可以将其样式设置为看起来不同(默认选择的选项卡)。

我的 HTML 看起来像:

我的 JSX 看起来像:

我想在第一个表上放一个类名,比如“selected”或“active”,但我不知道该怎么做。

有人可以帮忙吗?

0 投票
1 回答
375 浏览

reactjs - 如何在 jsx 中使用字符串作为 dom 部分?

当您观看这个简单的 JSX 示例时:

如何更改“DOM 部分”:

...动态基于我提交的变量?

0 投票
2 回答
1879 浏览

visual-studio - 在 Visual Studio 2012 中,尝试使用 React JS 编写 JSX 时收到警告和波浪线

我正在使用一个单独的 javascript 文件来放入我的 React JS JSX。当我使用文档给出的示例时,我会收到大量的 Visual Studio 警告和丑陋的波浪线。

我想不出办法解决这个问题。对于 React JS 来说,这几乎是一个交易破坏者。

在此处输入图像描述

0 投票
2 回答
1646 浏览

reactjs - 有没有办法在原生 CommonJS 环境中使用 JSX?

我正在一个对模块具有原生CommonJS支持的环境中启动一个新项目——它是一个 atom-shell 项目,不可能使用诸如 Browserify 或 webpack AFAIK 之类的预编译步骤require

我可以在 myapp.jsx上声明的入口点文件上使用 JSX index.html,这是因为JSXTransformer之前声明过:

我希望能够对在我的app.jsx模块中作为 CommonJS 模块导入的子模块使用 JSX 语法:

据我了解,我将被迫放弃 JSX 语法,并为通过require. 在这种情况下是否有任何替代方法可以继续使用 JSX?

0 投票
3 回答
108874 浏览

css - 使用 ReactJS 生成内联字体大小样式

我正在尝试在 ReactJS 中做这样的事情:

问题是我在运行代码时收到此错误:“模块构建失败:错误:解析错误:第 5 行:意外令牌 -”显然,React 不喜欢其中font-size有破折号。我该如何解决这个问题?有什么方法可以逃避那个角色的反应吗?是否有一些不同的 css 属性可以更好地做出相同的事情?

谢谢!

0 投票
1 回答
1950 浏览

javascript - 使用 jsx 命令行编译器——不会编译到文件中

我有一个可能是一个简单的 jsx 问题,所以请原谅我的愚蠢。

我正在使用 React 的 jsx 命令行编译器。我有一个非常简单的 JSX 文件,如下所示:

如果我在命令行中键入以下内容,它会编译(并在控制台中显示结果):jsx test.jsx

我想将此文件输出到test.js. 但是,如果我尝试该命令jsx test.jsx test.js,则没有任何反应——它只输出该jsx命令的帮助信息。

有任何想法吗?我觉得应该很明显。

0 投票
2 回答
3579 浏览

javascript - 使 react-router 不会破坏 Jest (reactJs) 测试

我目前正在尝试将 Jest 测试添加到 React 应用程序(在此处找到)。

但是,当我运行以下测试时,

我收到以下错误:

我的应用程序和CategoryPage组件都专门使用 react-router。CategoryPage 包含一个使用 react-router 进行身份验证的 mixin。根据我自己的调试,我发现当 Jest 尝试调用makeHrefreact-router 的内置导航方法之一时发生错误。

为了解决这个问题,我首先尝试调用jest.dontMock('react-router'),但这没有任何效果。问题似乎是,通过不嘲笑CategoryPage, jest 将自动且不可逆转地包含其所有依赖项,未嘲笑。

这个问题很难解决的部分原因是因为大多数使用 Jest 和 React 的人似乎没有测试他们的组件,要么是因为他们不是以测试为中心,要么是因为他们使用 Flux 并且只测试 Stores、Dispatchers 等. 我们还没有使用 Flux,所以这不是我们的选择,但可能是我们将来必须过渡到的东西。

编辑 1:如果我删除了测试通过,jest.dontMock('../js/components/CategoryPage.jsx')那么就不可能实际测试该组件的功能。

编辑 2:当我排除时,jest.dontMock('jquery')我得到另一个与我用来创建模态的 mixin 相关的错误:

编辑 3:我似乎已经将错误隔离到 react-router 的 Navigation mixin,它调用this.context.makeHref. React 团队this.context从 .9 版本开始就弃用了,所以我相信这可能是问题的根源。因此,欢迎任何解决方法或修复this.context方法。