Question

我在一个模式中使用UploadCare，现在通过Portal（来自React 16）呈现。 UploadCare在模态中工作正常，直到我创建了一个React门户，然后发生了以下错误：

Error: No DOM elements found matching selector
▶ 2 stack frames were collapsed.
UploadCare.componentDidMount
src/components/UploadCare.js:8
   5 | class UploadCare extends Component {
   6 |   componentDidMount() {
   7 |     const { onChange } = this.props;
>  8 |     const widget = uploadcare.Widget(`#${this.id}`);

我正在创建我的门户网站：https://codepen.io/gaearon/pen/yzMaBd

UploadCare需要一个DOM选择器，我在其中使用一个名为id的选择器。代码如下：

class UploadCare extends Component {
  componentDidMount() {
    const { onChange } = this.props;
    const widget = uploadcare.Widget(`#${id}`);

    if (onChange && typeof onChange === "function") {
      widget.onChange(file => {
        if (file) {
          file.done(info => onChange(info.cdnUrl)).fail(() => onChange(null));
        } else {
          onChange(null);
        }
      });
    }
  }

  render() {
    const { id, name } = this.props;
    return (
      <input
        type="hidden"
        name={name}
        id={id}
        data-public-key={process.env.REACT_UPLOADCARE_PUBLIC_KEY}
      />
    );
  }
}

我已经使用ref修复了错误，但我不明白错误发生的原因。有人可以向我解释一下门户网站做了什么来影响DOM和我的CSS选择器以及为什么它需要我现在使用ref来查找DOM元素？谢谢！

Answer 1

使用ref是正确的方法。 Official documentation of React建议使用ref与第三方DOM库（如Uploadcare Widget）集成。所以，这个正确的代码：

class UploadCare extends Component {
  componentDidMount() {
    const { onChange } = this.props;
    const widget = uploadcare.Widget(this.uploader);

    if (onChange && typeof onChange === "function") {
      widget.onChange(file => {
        if (file) {
          file.done(info => onChange(info.cdnUrl)).fail(() => onChange(null));
        } else {
          onChange(null);
        }
      });
    }
  }

  render() {
    const { id, name } = this.props;
    return (
      <input
        type="hidden"
        ref={input => this.uploader = input}
        name={name}
        id={id}
        data-public-key={process.env.REACT_UPLOADCARE_PUBLIC_KEY}
      />
    );
  }
}

id怎么样？因此，在您的代码中，您可以在一个地方使用${id}

    const widget = uploadcare.Widget(`#${id}`);

和${this.id}在另一个地方

>  8 |     const widget = uploadcare.Widget(`#${this.id}`);

但是，在componentDidMount范围内，这些变量未定义。

尝试使用道具

    const { onChange, id } = this.props;
    const widget = uploadcare.Widget(`#${id}`);

或

    const { onChange } = this.props;
    const widget = uploadcare.Widget(`#${this.props.id}`);

任何方式，使用ref都会更好。

谢谢！我更新了https://github.com/uploadcare/uploadcare-widget-react-demo/

在创建React Portal后，UploadCare无法找到DOM元素匹配选择器

1 个答案: