在 React 中渲染孩子，丢失道具数据答案

【问题标题】：Rendering children in React, losing props data在 React 中渲染孩子，丢失道具数据
【发布时间】：2015-03-23 16:13:12
【问题描述】：

我有三个反应组件呈现复选框组。

Queries -> renders a group
Query -> renders checkboxes
QueryItem -> render single input[type=checkbox]

我将来自查询的数据作为孩子的道具传递：

<div className="group queries">
  {component.state.groups.map((group, index) => {
    return <Query key={group.key} data={group} />
  })}
</div>

然后在查询：

<div>
  <h1>{component.props.data.label}</h1>

  <ul>
    {component.props.data.queries.map( (query, index) => {
      return <QueryItem key={query.key} data={query} />
    })}
  </ul>
</div>

最后在 QueryItem 组件中：

<li>
  <input type='checkbox'
    ref="input"
    defaultChecked={component.props.data.checked}
    onChange={component.checkChanged}
    name={component.props.data.id}
    id={component.props.data.id} />

  <label htmlFor={component.props.data.id}>
    {component.props.data.label} <em>({component.props.data.total})</em>
  </label>
</li>

数据被正确渲染。但是，当 onChange（checkChanged 函数）被调用时：

checkChanged (e) {
  console.log(component.props.data)
}

component.props.data 中的数据是来自最后呈现的 QueryItem 的数据。所以，基本上，数据总是相同的，并不代表被渲染的数据。

你可以看到，我使用 key 属性来确保组件是唯一的。如果我检查data-reactid，我可以看到它们是独一无二的。

发生了什么事？我在设置类型中做错了什么？此设置的目标是在更改复选框时调用数据调用，然后将数据从 Queries 向下传递到 Query 到 QueryItem。

【问题讨论】：

component 是否指代this？
@Morhaus 是的，对不起，它确实指的是这个。
这听起来像是某种“引用”问题，或者通过闭包意外地在组件实例之间共享范围。您使用“组件”而不是“这个”可能是罪魁祸首。你在哪里声明？

标签： javascript properties nested reactjs children

【解决方案1】：

您是否无意中将变量声明为“类外”？这可能导致意外行为。尝试正确初始化所有变量，看看问题是否仍然存在

【讨论】：

谢谢，这正是发生的事情。