问题标签 [reactjs]

我正在尝试为数据结构创建一个简单的基于网格的编辑器，但我在使用 React.js 时遇到了一些概念问题。他们的文档对此不是很有帮助，所以我希望这里有人可以提供帮助。

首先，将状态从外部组件转移到内部组件的正确方法是什么？内部组件的状态变化是否可以“冒泡”到外部组件？

其次，两个独立的组件是否可以共享数据，以便一个中的突变在另一个中可见？

下面是我想做的事情的简化示例（JSFiddle 版本）：

我有一个company包含对象数组的employee对象。employee我想在可编辑的网格中布置列表。当我单击按钮时，我想查看生成的company对象以及任何突变（写入控制台）。

我要创建我的custom tag：

无需从 JSX 安装

我打算在我的HTML模板中使用它：

是否可以react直接在 html 模板中使用组件标签。因为每次从JSX/JS文件挂载它似乎真的很不方便。

演示：jsfiddle

当我将 °F 值更改为 1 时，它会转换为摄氏温度，然后再转换回华氏温度，从而导致舍入误差。

有什么办法可以避免对当前修改的元素进行更新？

Backbone.js 有完全相同的问题。

我有以下配置为 JSON

在 react rendercomponent 中，是否可以动态传递组件名称来响应渲染。

例如，在这个渲染组件中而不是直接放置 ContentFormContent 是否可以从 json 配置传递数据，我可以循环或其他东西。

所以我将在 json 配置中有一个页面列表，并根据特定导航的选择，我将根据 json 文件中的“类型”呈现组件

我对 ReactJS 比较陌生，并且被易于实现服务器端渲染以减少“第一次发推文的时间”所吸引。我正在运行一个 Node-Express-React 堆栈，它使用 React 的 renderComponentToString 在服务器上预渲染标记。

当组件可以同步呈现时，它工作得很好，但是在实现 ajax 填充的组件时我正在苦苦挣扎（但这适用于组件初始化期间的任何异步操作，例如 websocket）。

以 React 网站为例：http: //facebook.github.io/react/tips/initial-ajax.html

它不会在服务器上工作，因为使用 renderComponentToString 时不会触发 componentDidMount。这个简单的情况可以通过在客户端和服务器上使用相同的 HTTP 请求包装器（而不是使用 jQuery 的 $.get），并通过在实例化组件之前预取数据并将其作为道具传递来解决。

然而，在一个实际的、复杂的应用程序中，异步依赖可能会变得非常复杂，并且预取并不真正适合构建 React 结构的后代方法。我如何在 React 中实现异步初始化模式，它可以在服务器上呈现而无需实际安装任何东西（即没有 DOM 模拟 la PhantomJS，这是使用 renderComponentToString 的全部意义）？

如果你去这里：http : //facebook.github.io/react/index.html 你会在 jsx 中找到教程，但我如何只使用 js？

例如，上面的代码使用了一个监听器，我该如何在纯 JavaScript 中做到这一点？

谢谢

我是第一次玩 React，我想我真的很喜欢它。到目前为止，我已经实现了（大部分）棋盘游戏围棋，但我遇到了一些奇怪的事情，我不知道如何以惯用的 React 方式处理。基本上，我有一个模型——棋盘游戏——实现为它自己的类Board。它只公开它的构造函数、方法play(i,j)和pass. 它处理所有游戏逻辑并适当地更新自己的内部状态。它没有引用与视图/组件相关的任何内容。我有一个名为BoardView的 React 组件，它维护对Board. 我还有一个名为AlertView在适当的时候显示有关游戏状态（非法移动等）的消息。

现在一切正常，我喜欢Board类和它的视图之间的关注点分离。但是，我让我的Board班级将其更改传达给视图的方式很不寻常，而且我觉得它与其他 React 代码不一致。基本上，我滥用jQuery 的事件系统来允许我触发任意事件，例如["update", "atari", "suicide"]. 在这个方案中，组件有一个 onClick 监听器，它会调用Board.play0 到 Board 实例上的许多事件。组件侦听"update"事件并调用this.setState，这将强制它重新render()- 将视图置于正确描述游戏的状态。AlertView侦听同一板实例上的 和 事件并类似地"atari"调用"suicide"this.setState, 这触发另一个render().

我应该删掉 jQuery 事件吗？如果是这样，最好的方法是什么？

所有代码都可以在此处获得，您可以在此处使用该应用程序。

编辑：为了后代，这个问题是在提交3f600c时提出的。

许多模板语言都有“slots”或“yield”语句，允许执行某种控制反转来将一个模板包装在另一个模板中。

Angular 有“transclude”选项。

Rails 有yield 语句。如果 React.js 有 yield 语句，它看起来像这样：

期望的输出：

唉，React.js 没有<yield/>. 如何定义 Wrapper 组件以实现相同的输出？

我的问题分为两部分：

1. 我知道如何在 componentDidMount 上对第三方 api 进行 ajax 请求，但是当我尝试在 click 事件上使用函数执行相同的请求时，它没有发生？

2. 我也尝试<br>在反应中使用标签来换行，但它根本不渲染并给我错误。

谁能帮我理解为什么会这样，我该如何解决这些问题？

Our application uses infinite scrolling to navigate large lists of heterogenous items. There are a few wrinkles:

• It's common for our users to have a list of 10,000 items and need to scroll through 3k+.
• These are rich items, so we can only have a few hundred in the DOM before browser performance becomes unacceptable.
• The items are of varying heights.
• The items may contain images and we allow the user to jump to a specific date. This is tricky because the user can jump to a point in the list where we need to load images above the viewport, which would push the content down when they load. Failing to handle that means that the user may jump to a date, but then be shifted to an earlier date.

Known, incomplete solutions:

• (react-infinite-scroll) - This is just a simple "load more when we hit the bottom" component. It does not cull any of the DOM, so it will die on thousands of items.

• (Scroll Position with React) - Shows how to store and restore the scroll position when inserting at the top or inserting at the bottom, but not both together.

I'm not looking for the code for a complete solution (although that would be great.) Instead, I'm looking for the "React way" to model this situation. Is scroll position state or not? What state should I be tracking to retain my position in the list? What state do I need to keep so that I trigger a new render when I scroll near the bottom or top of what is rendered?