javascript - 如果在 DOM 中手动编辑了文本节点，如何强制 React 更新它？

Question

我有一个正在 DOM 中手动编辑的文本节点，当调用 render() 方法时，React 不会更新该文本节点。

使用官方React website中的示例进行演示:

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {/* Note: using contentEditable only for the purpose of this demo */}
        {this.props.items.map(item => (
          <li key={item.id} contentEditable={true}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="todos-example"></div>

我仅为此演示添加了 contentEditable (我不是试图更新待办事项)，当您添加一个新项目，然后直接在 DOM 中编辑它，然后添加另一个项目时项目，为什么之前编辑的项目没有更新到之前的状态？

编辑:

我为什么要这样做？ 我有一个应用程序，用户可以单击编辑按钮并开始直接编辑文本，我添加 contentEditable 属性并使用 onInput 存储编辑的文本并更新使用作为 prop 传递的函数的父状态，我想要解决的是当用户取消编辑时，我想恢复之前的文本，我当前正在做的是直接编辑 innerText该元素的值设置先前的值，因为它没有被 React 更新。

Answer 1

你遇到这个问题是因为 React 有一个虚拟 DOM，它可以在其中比较更改。当您修改真实 DOM 时，React 不知道您修改了它，因此当它将其虚拟 DOM 与新的 render() 进行比较时，发现该元素没有任何变化，因此不会重新渲染.

如果您可以控制 React 组件中的所有 HTML，请不要直接修改 DOM，永远不要。您应该在用户操作(在本例中为按键)上添加事件监听器以捕获它们并相应地更新组件状态。如果您这样做，您必须了解如何React virtual DOM works .