javascript - 在没有收到 ContentEditable 警告的情况下呈现 ContentEditable 组件？

Question

我在渲染我的组件时收到以下警告:

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

这是我的组件:

import React, { Component } from "react";

export default class Editable extends Component {
  render() {
    return (
      <div contentEditable={true} onBlur={this.props.handleBlur}>
        {this.props.children}
      </div>
    );
  }
}

https://github.com/lovasoa/react-contenteditable 中的这个组件不会生成警告。

import React from 'react';

let stripNbsp = str => str.replace(/ |\u202F|\u00A0/g, ' ');

export default class ContentEditable extends React.Component {
  constructor() {
    super();
    this.emitChange = this.emitChange.bind(this);
  }

  render() {
    var { tagName, html, ...props } = this.props;

    return React.createElement(
      tagName || 'div',
      {
        ...props,
        ref: (e) => this.htmlEl = e,
        onInput: this.emitChange,
        onBlur: this.props.onBlur || this.emitChange,
        contentEditable: !this.props.disabled,
        dangerouslySetInnerHTML: {__html: html}
      },
      this.props.children);
  }

  shouldComponentUpdate(nextProps) {
    let { props, htmlEl } = this;

    // We need not rerender if the change of props simply reflects the user's edits.
    // Rerendering in this case would make the cursor/caret jump

    // Rerender if there is no element yet... (somehow?)
    if (!htmlEl) {
      return true;
    }

    // ...or if html really changed... (programmatically, not by user edit)
    if (
      stripNbsp(nextProps.html) !== stripNbsp(htmlEl.innerHTML) &&
      nextProps.html !== props.html
    ) {
      return true;
    }

    let optional = ['style', 'className', 'disabled', 'tagName'];

    // Handle additional properties
    return optional.some(name => props[name] !== nextProps[name]);
  }

  componentDidUpdate() {
    if ( this.htmlEl && this.props.html !== this.htmlEl.innerHTML ) {
      // Perhaps React (whose VDOM gets outdated because we often prevent
      // rerendering) did not update the DOM. So we update it manually now.
      this.htmlEl.innerHTML = this.props.html;
    }
  }

  emitChange(evt) {
    if (!this.htmlEl) return;
    var html = this.htmlEl.innerHTML;
    if (this.props.onChange && html !== this.lastHtml) {
      // Clone event with Object.assign to avoid 
      // "Cannot assign to read only property 'target' of object"
      var evt = Object.assign({}, evt, { 
        target: { 
          value: html 
        } 
      });
      this.props.onChange(evt);
    }
    this.lastHtml = html;
  }
}

问题:

• React 想要警告我的代码的潜在问题是什么？通过阅读 https://reactjs.org/docs/dom-elements.html 上的文档，我不太明白。
• 为什么 https://github.com/lovasoa/react-contenteditable 中的组件不生成相同的警告？

Answer 1

您声明的组件正在生成调用 React.createElement 的组件，如下所示 从而避免警告:

function ContentEditable(props) {
  return React.createElement('div', {contentEditable: true});
}

而您使用的是 jsx。

function ContentEditable(props) {
  return (<div contentEditable={true}></div>);
}

您可以阅读更多here关于为什么 react 警告你。如果你想抑制警告，你也可以使用 suppressContentEditableWarning 属性。

function ContentEditable(props) {
  return (<div contentEditable={true} suppressContentEditableWarning={true}></div>);
}