reactjs - 何时使用 React createFragment？

Question

我正在 React Native 中渲染一个 ListView，设法修复了这个 React 警告，但我不明白它是如何工作的以及为什么工作:

Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child.

// This array generates React Fragment warning.
var data1 = [{name: "bob"}, {name:"john"}]

// This array works, no warnings.
var data2 = [React.addons.createFragment({name: "bob"}),
             React.addons.createFragment({name: "john"})]

// This also works, no warnings.
var data3 = ["bob", "john"]

class Listings extends React.Component {
  constructor(props) {
    super(props)
    ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})

    this.state = {
      dataSource: ds.cloneWithRows(data),
    }
  }
  render() {
    return (
       <ListView
         dataSource={this.state.dataSource} 
         renderRow={(rowData) => <Text>{rowData}</Text>} />
    )
  }
}

什么是 React 片段？ React 中什么时候需要它？为什么带键的对象会导致此警告？

Answer 1

我将我的答案分为两部分，以涵盖我在您的问题中看到的两个要点。

第 1 部分:什么是 React 片段？

为了解释什么是 React Fragment，我们需要退一步讨论 React Keys。

键帮助 React 识别哪些项目已更改、添加或删除。应将它们赋予数组内的元素，以便为元素提供稳定的标识(唯一性)。

选择键的最佳方法是使用一个字符串来唯一标识其同级列表项。大多数情况下，您会使用数据中的 ID 作为键。这是一个实际示例:

render() {
    const todoItems = todos.map((todo) =>
      <li key={todo.id}>
        {todo.text}
      </li>
    );

    return todoItems;
}

值得注意的是 todoItems实际上是一个 <li> 的数组元素。

了解了这一点，让我们继续讨论为什么您会在用例中收到警告。

在大多数情况下，您可以使用 key prop 来指定从渲染返回的元素上的键，就像上面的示例一样。但是，这在一种情况下会失败:如果您有两组需要重新排序的子项，则无法在不添加包装元素的情况下在每组上放置一个键。

这是 recently updated React docs 中的经典示例:

function Swapper(props) {
  let children;
  if (props.swapped) {
    children = [props.rightChildren, props.leftChildren];
  } else {
    children = [props.leftChildren, props.rightChildren];
  }
  return <div>{children}</div>;
}

当您更改swapped时， children 将卸载并重新安装prop 因为两组子项上没有标记任何键。

要解决此问题，您可以使用 createFragment 附加组件为子集提供键。 Follow the enhanced example, using the createFragment here .

<小时/>

第 2 部分:但是为什么您会收到此警告？

无论如何，您遇到的错误发生只是因为您尝试将 JavaScript 对象(而不是 JSX 元素或字符串)插入到某些 JSX 中。

尽管错误消息建议使用 createFragment要解决这个问题，原因是因为您将变量插入到某些 JSX 中，该变量不是字符串或 JSX 元素，而是实际上是其他类型的对象!

您的用例中有这样一个误导性的警告，不是吗？ :-)