问题标签 [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.
reactjs - ReactJS 和 JSX - 我可以有不受控制的复选框吗?
在 React 中,我可以通过使用defaultValue
属性来获得不受控制的文本输入。但是,复选框没有这样的属性(只有checked
,这使得它受到控制)。我有一个带有很多复选框的巨大表单,但用户无法更改它们!可能我可以使用双向数据绑定 mixin,但文档建议不要使用它们,所以我被卡住了。
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)
. 转换器为什么要使用这个功能?
javascript - 将多个 .jsx 文件编译成一个 .js 文件
有没有办法一步将多个reactjs.jsx
文件编译成一个.js
文件?
就像是:
jsxtool compile ./src/*.jsx --out app.js
谢谢。
reactjs - React JSX 和 FirstSibling 或 FirstChild
我正在尝试使用 Reach JSX 做一些对 JQuery 来说很简单的事情,但我无法在 JSX 中弄清楚。我已经尽可能地简化了这个例子,问题归结为:
我正在渲染许多选项卡标题,并且我希望第一个选项卡以特定的类名呈现,以便我可以将其样式设置为看起来不同(默认选择的选项卡)。
我的 HTML 看起来像:
我的 JSX 看起来像:
我想在第一个表上放一个类名,比如“selected”或“active”,但我不知道该怎么做。
有人可以帮忙吗?
reactjs - 如何在 jsx 中使用字符串作为 dom 部分?
当您观看这个简单的 JSX 示例时:
如何更改“DOM 部分”:
...动态基于我提交的变量?
visual-studio - 在 Visual Studio 2012 中,尝试使用 React JS 编写 JSX 时收到警告和波浪线
我正在使用一个单独的 javascript 文件来放入我的 React JS JSX。当我使用文档给出的示例时,我会收到大量的 Visual Studio 警告和丑陋的波浪线。
我想不出办法解决这个问题。对于 React JS 来说,这几乎是一个交易破坏者。
reactjs - 有没有办法在原生 CommonJS 环境中使用 JSX?
我正在一个对模块具有原生CommonJS支持的环境中启动一个新项目——它是一个 atom-shell 项目,不可能使用诸如 Browserify 或 webpack AFAIK 之类的预编译步骤。require
我可以在 myapp.jsx
上声明的入口点文件上使用 JSX index.html
,这是因为JSXTransformer
之前声明过:
我希望能够对在我的app.jsx
模块中作为 CommonJS 模块导入的子模块使用 JSX 语法:
据我了解,我将被迫放弃 JSX 语法,并为通过require
. 在这种情况下是否有任何替代方法可以继续使用 JSX?
css - 使用 ReactJS 生成内联字体大小样式
我正在尝试在 ReactJS 中做这样的事情:
问题是我在运行代码时收到此错误:“模块构建失败:错误:解析错误:第 5 行:意外令牌 -”显然,React 不喜欢其中font-size
有破折号。我该如何解决这个问题?有什么方法可以逃避那个角色的反应吗?是否有一些不同的 css 属性可以更好地做出相同的事情?
谢谢!
javascript - 使用 jsx 命令行编译器——不会编译到文件中
我有一个可能是一个简单的 jsx 问题,所以请原谅我的愚蠢。
我正在使用 React 的 jsx 命令行编译器。我有一个非常简单的 JSX 文件,如下所示:
如果我在命令行中键入以下内容,它会编译(并在控制台中显示结果):jsx test.jsx
我想将此文件输出到test.js
. 但是,如果我尝试该命令jsx test.jsx test.js
,则没有任何反应——它只输出该jsx
命令的帮助信息。
有任何想法吗?我觉得应该很明显。
javascript - 使 react-router 不会破坏 Jest (reactJs) 测试
我目前正在尝试将 Jest 测试添加到 React 应用程序(在此处找到)。
但是,当我运行以下测试时,
我收到以下错误:
我的应用程序和CategoryPage
组件都专门使用 react-router。CategoryPage 包含一个使用 react-router 进行身份验证的 mixin。根据我自己的调试,我发现当 Jest 尝试调用makeHref
react-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
方法。