如果我将{key}设置为null，React应该删除组件吗？

Question

我听说如果我们将键手动设置为null值，则react自动删除组件，如果键更改，它会重新安装组件。我试图重新创建此行为，但失败了。这是一个简单的示例：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "./Input";
import TestKey from "./testKey";

import "./styles.css";

class App extends Component {
 
  testKeyId = "some-value-for-testing";

  nullKey = () => {
    this.testKeyId = null
  };

  render() {
    return (
      <div className="App">
        <TestKey key={this.testKeyId} />
        <button onClick={this.nullKey}>Destroy component</button>
      </div>
    );
  }
}

非常感谢您对我的主题提出任何建议。

Answer 1

如果key属性将设置为null，它将不会删除该组件。

key={null}只是另一个像key={'unique-key'}并生成child.key === ".$null"

的键

但是，具有相同键 的组件可能会导致子代重复和/或省略。

以下是使用相同密钥复制组件的示例：

  console.log(
    React.Children.toArray(children)
      .filter(child => child.type === NullableComponent)
      .map(child => child.key)
  );

在每个渲染中，我们记录了组件键。 在将组件键转到null之前，它可能会记录：

[".$unique-key-1", ".$unique-key-2"]

但是在复制了组件键之后，您会看到带有日志的重复组件：

[".$null", ".$null"]

尝试将SAME_KEY变量更改为您想要的任何变量，以查看null与其他键之间没有区别。

此外，您还会收到警告：

  

警告：遇到两个具有相同密钥null的孩子。   密钥应唯一，以便组件保持其身份   跨更新。非唯一键可能导致子代重复   和/或省略-该行为不受支持，并且可能会在   未来版本。       在NullableChildren中（由App创建）       在应用程序中

Answer 2

例如，您可以管理一个包含布尔值的状态，该状态决定是否打开或关闭组件，以及根据当前状态进行三元操作以呈现或不显示该组件：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "./Input";
import TestKey from "./testKey";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      turnState: true,
    }
  }

  testKeyId = "some-value-for-testing";

  handleClick = () => {
    this.setState({turnState: false})
  };

  render() {
    return (
      <div className="App">
        {this.state.turnState ? <TestKey key={this.testKeyId} /> : undefined}
        <button onClick={this.handleClick}>Destroy component</button>
      </div>
    );
  }
}

发生这种情况是因为在React中，当您更改状态时，它将重新渲染使用该特定状态的所有组件。您可以详细了解here。