Question

这个问题适合非常善于反应和理解filestack-js

的人

我阅读了src / ReactFilestack.jsx的完整源代码，但是我无法找到filestack将自己附加到dom的部分..不知怎的，它只是神奇地......没有使用ref或ReactDom任何。

如果可能，任何人都可以指向dom附件的行从client到<Tag>发生了什么？https://github.com/filestack/filestack-react/blob/master/src/ReactFilestack.jsx

谢谢！

import React, { Component } from 'react';
import filestack from 'filestack-js';
import PropTypes from 'prop-types';

class ReactFilestack extends Component {
  static defaultProps = {
    file: null,
    link: false,
    buttonText: 'Pick file',
    buttonClass: '',
    onSuccess: result => console.log(result),
    onError: error => console.error(error),
    mode: 'pick',
    options: {},
    security: null,
    children: null,
    render: null,
    cname: null,
  };

  static propTypes = {
    file: PropTypes.objectOf(PropTypes.any),
    apikey: PropTypes.string.isRequired,
    link: PropTypes.bool,
    mode: PropTypes.string,
    buttonText: PropTypes.string,
    buttonClass: PropTypes.string,
    onSuccess: PropTypes.func,
    onError: PropTypes.func,
    options: PropTypes.objectOf(PropTypes.any),
    security: PropTypes.objectOf(PropTypes.any),
    children: PropTypes.node,
    render: PropTypes.func,
    cname: PropTypes.string,
  };

  onClickPick = (event) => {
    event.stopPropagation();
    event.preventDefault();
    const {
      apikey,
      onSuccess,
      onError,
      options,
      mode,
      file,
      security,
      cname
    } = this.props;
    const onFinished = (result) => {
      if (typeof onSuccess === 'function') {
        onSuccess(result);
      } else {
        console.log(result);
      }
    };
    const onFail = (error) => {
      if (typeof onError === 'function') {
        onError(error);
      } else {
        console.error(error);
      }
    };

    this.initClient(mode, apikey, options, file, security, cname)
      .then(onFinished)
      .catch(onFail);
  };

  initClient = (mode, apikey, options, file, security, cname) => {
    const { url, handle } = options;
    delete options.handle;
    delete options.url;
    const client = filestack.init(apikey, security, cname);

    if (mode === 'transform') {
      return new Promise((resolve, reject) => {
        try {
          resolve(client.transform(url, options));
        } catch (err) {
          reject(err);
        }
      });
    } else if (mode === 'retrieve') {
      return client.retrieve(handle, options);
    } else if (mode === 'metadata') {
      return client.metadata(handle, options);
    } else if (mode === 'storeUrl') {
      return client.storeURL(url, options);
    } else if (mode === 'upload') {
      return client.upload(file, options);
    } else if (mode === 'remove') {
      return client.remove(handle, security);
    }

    return client.pick(options);
  };

  render () {
    const { buttonClass, buttonText, link, children, render: CustomRender } = this.props;
    if (CustomRender) {
      return (
        <CustomRender onPick={this.onClickPick} />
      );
    }
    const Tag = link ? 'a' : 'button';
    return (
      <Tag
        name="filestack"
        onClick={this.onClickPick}
        className={buttonClass}
      >
        {children || buttonText}
      </Tag>
    );
  }
}

export default ReactFilestack;

Answer 1

查看代码和文档，似乎在触发动作文件堆栈时会将一个div附加到dom并将其UI放入其中。 UI显示为模态，无法使用您链接的包将其安装在react组件中。

现在，他们可以使用门户网站将UI作为其父反应组件的子项。

通过查看Dom检查器可以观察到此行为。您应该看到文档底部出现div。它没有创建一个'dom'，只是一个dom元素，并将它们的ui安装在它上面。

客户端dom附加到文件堆的反应dom反应？

1 个答案: