问题标签 [reactjs]

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 回答
18486 浏览

javascript - React.js:组合组件以创建选项卡

我正在尝试制作一个标签组件。TabsSwitcher 和 TabsPanel 必须是单独的组件,以便它们可以在 DOM 中的任何地方使用,例如 TabsSwitcher 不必跟 TabsPanel。

为了使它工作,我需要以某种方式连接这些组件。此外,TabsSwitcher 必须能够在单击选项卡时告诉 TabsPanel。

最好的方法是什么?


解决方案:http: //jsfiddle.net/NV/5YRG9/

0 投票
1 回答
1164 浏览

javascript - React.js:对象的建模选择

画布上有几个点,单击一个应显示允许编辑所选点的xy坐标的工具栏。

JSFiddle

我试过:

它不起作用,因为它state.selected是点对象的副本,而不是指向它的指针。

我怎样才能让它工作?

0 投票
1 回答
12519 浏览

javascript - React:为什么 `this.props.children` 未定义?

我正在用 ReactJS 构建一个电子电阻计算器。我有一个这样声明的组合组件:

BandSelector 呈现<select>元素,当一个元素发生变化时,我想更新ResistanceCalculator的状态。所以我的想法是我需要将一个事件监听器绑定到ResistanceCalculator孩子。然而this.props.children似乎是空的。为什么是这样?

0 投票
3 回答
611 浏览

angularjs - 我可以使用 ReactJS 和 AngularJS 来处理“视图”吗?

我们有一个用 AngularJS 编写的应用程序,但我们遇到了性能问题,因为该应用程序试图从服务器加载大量数据并让用户使用它(读取复杂的 DOM)。到处浏览和阅读似乎 AngularJS 的双向数据绑定(本质上称为 $watch 表达式等)提出了一个我们无法克服的问题。然后我们遇到了承诺快速视图渲染的 fb 的 ReactJS。

这让我们想知道 ReactJS 是否可以与 AngularJS 一起使用来处理“视图”部分。如果有人能就此提供一些见解或方向,将不胜感激?

谢谢

0 投票
7 回答
29447 浏览

javascript - React.js:教程中的示例不起作用

我正在做来自http://facebook.github.io/react/docs/tutorial.html的 React.js 教程。这是我的文件:

模板.html:

和 tut.js:

但是当我在浏览器中打开它时,我只看到一个没有任何评论的空白页面。我究竟做错了什么?

0 投票
17 回答
165739 浏览

reactjs - Reactjs:意外的令牌'<'错误

我刚从 Reactjs 开始,正在编写一个简单的组件来显示
li标签并遇到了这个错误:

意外的令牌'<'

我已将示例放在 http://jsbin.com/UWOquRA/1/edit?html,js,console,output下面的 jsbin 中

请让我知道我做错了什么。

0 投票
1 回答
604 浏览

javascript - 包装一个 JavaScript 函数引用

我有以下 JavaScript 代码,它按预期工作......

但是,在剑道树视图中,在选择树节点时,会传递整个节点。要获得底层密钥,我需要按如下方式处理节点:

但是,我显然没有完全正确,在这里请原谅我的菜鸟,似乎在工作实例中使用了对该函数的引用,而在非工作实例中,该函数实际上正在执行。 ..或类似的东西:返回的错误消息是:

无法调用未定义的方法“onChange”。

那么我需要做什么才能在调用onChange方法之前引用提取密钥的函数呢?请注意,如果我的理解是正确的,则onChange需要在 MyApp 类的上下文中执行,以便任何子组件都会收到有关更改的通知。

编辑:我尝试过使用部分应用程序,但还没有完全到位。我已经更新了onChange例程以获取一个从节点返回密钥的函数

但我不确定如何将它全部连接起来。

0 投票
4 回答
67781 浏览

javascript - React.js - 如何将属性对象传递给子组件?

我有一个名为的组件tileGroup,它的属性是其他属性的集合(数组)。

父组件(tileGroup)通过使用集合中的每组属性创建一个新组件来呈现一个子组件列表。

现在我正在将每个属性从集合中单独映射到子组件,但是如果组件的属性计数增加,这将变得很麻烦,而且我确信有一种更清洁、更简单的方法来做到这一点......

如何在不重新映射每个属性的情况下将完整的属性集传递给子组件?

示例代码:

然后创建组件..

0 投票
12 回答
188299 浏览

javascript - 使 React 组件/div 可拖动的推荐方法

我想做一个可拖动的(即可以通过鼠标重新定位)React 组件,它似乎必然涉及全局状态和分散的事件处理程序。我可以用肮脏的方式来做,在我的 JS 文件中使用一个全局变量,甚至可以将它包装在一个漂亮的闭包接口中,但我想知道是否有一种方法可以更好地与 React 啮合。

此外,由于我以前从未在原始 JavaScript 中这样做过,我想看看专家是如何做到的,以确保我已经处理了所有极端情况,尤其是与 React 相关的情况。

谢谢。

0 投票
1 回答
758 浏览

javascript - Polymer 元素中的 React.js 组件:每个鼠标/滚轮/按键事件上的错误

聚合物 0.1.1 和 React.js 0.8.0。

简化案例: http: //jsbin.com/usIZuLo/3在每个鼠标/滚轮/按键事件上都会出现这样的错误:

看起来 Polymer 的 events.js 与 React 的合成事件发生冲突。

错误堆栈到此结束(react.js:7794):

问题可能nativeEvent是实际上是由聚合物包裹的。根据// TODO:说明,这在未来版本的 React 中可能不是问题。