Question

我想从Contentful创建UI扩展，以添加来自Algolia数据库的标签。我正在尝试将外部React.js文件加载到html文件中，并且浏览器中没有加载任何内容。我正在使用Chrome浏览器运行我的代码。

我试图将代码直接放入html文件中，但浏览器中没有任何显示。仅显示的代码是<p>标记之外的<script>标记。

<!DOCTYPE html>
<html>
  <head>
    <title>Tag Extension</title>
    <meta charset="utf-8" />
    <!-- Contentful's default styles -->
    <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
    <!-- UI Extensions SDK -->
    <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
  </head>
  <body>
    <div id="root">

      <p>Hello World</p>
    </div>
    <script type="text/javascript" src="./index.js">

    </script>
  </body>
</html>

import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { init } from 'contentful-ui-extensions-sdk';
import '@contentful/forma-36-react-components/dist/styles.css';
import './index.css';
import algoliasearch from "algoliasearch";
import algoliasearchHelper from "algoliasearch-helper";
import dotenv from 'dotenv';

dotenv.config() // ensures that .env is used

class App extends React.Component {
  detachExternalChangeHandler = null;

  static propTypes = {
    sdk: PropTypes.object.isRequired,
  };

  /**
   * Perform an algolia request, returning data on success, error on failure.
   *
   * @param {string} index - The index we are going to load data from.
   * @param {any} options - Options sent to algolia, can contain filters, hitsPerPage, etc.
   * @param {string} query - An optional query string to pass to the search helper.
   * @param {int} page - The page we are on, defaults to 0 (first page).
   * @returns Promise - returns promise that resolves when the data is retrieved, rejecting on error.
   */
  static fetchFromAlgolia(index, options, query, page) {
    // example options
    // {
    //   hitsPerPage: 10,
    //   filters: objectID:123 OR objectID:456
    // }
    const client = algoliasearch(
      process.env.REACT_APP_INSTANTSEARCH_APP_ID,
      process.env.REACT_APP_INSTANTSEARCH_API_KEY
    );
    if (!page) {
      page = 0;
    }
    const helper = algoliasearchHelper(client, index);
    return new Promise((resolve, reject) => {
      if (query !== undefined) {
        helper.setQuery(query).setPage(page).searchOnce(options, (error, data, state) => {
          // console.log(error, data, state, 'error data and state');
          if (error) {
            reject({
              status: 404,
              message: "There was an error loading the content.",
              error: error
            });
          } else {
            resolve(data, state);
          }
        });
      } else {
        helper.setPage(page).searchOnce(options, (error, data, state) => {
          // console.log(error, data, state, 'error data and state');
          if (error) {
            reject({
              status: 404,
              message: "There was an error loading the content.",
              error: error
            });
          } else {
            resolve(data, state);
          }
        });
      }
    });
  }

  constructor(props) {
    super(props);
    this.state = {
      value: props.sdk.field.getValue(),
      error:false,
      hasLoaded:false,
      items:[]
    };
  }

  componentDidMount() {
    this.props.sdk.window.startAutoResizer();

    // Handler for external field value changes (e.g. when multiple authors are working on the same entry).
    this.detachExternalChangeHandler = this.props.sdk.field.onValueChanged(
      this.onExternalChange
    );

    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then( items => {
          this.setState({
            hasLoaded:true,
            items
          });
        },
        (error) => {
          this.setState({
            hasLoaded:true,
            error:error
          })
        }
      )
  }

  componentWillUnmount() {
    if (this.detachExternalChangeHandler) {
      this.detachExternalChangeHandler();
    }
  }

  onExternalChange = value => {
    this.setState({ 
      ...this.state,
      value
    });
  };

  onChange = e => {
    const value = e.currentTarget.value;
    this.setState({ 
      ...this.state,
      value });
    if (value) {
      this.props.sdk.field.setValue(value);
    } else {
      this.props.sdk.field.removeValue();
    }
  };

  handleSearch = () => {
    const tagIndex = process.env.REACT_APP_TAGS_INDEX;
    const hitsPerPage = 3;
    const options = { hitsPerPage };

    SearchUtil.fetchFromAlgolia(tagIndex, options, this.state.value)
      .then((data, state) => {
        this.setState({
          ...this.state,
          items: data
        });
      })
      .catch(error => {
        console.log(error, 'there was an error');
      });
  }

  render() {
    console.log(this.state, 'data and state in callback');

    return (
      <div>
        <ul>
            {this.state.items.map(item => {
              <li>{item.name}</li>
            })}
        </ul>
      </div>
    );
  }
}

init(sdk => {
  ReactDOM.render(<App sdk={sdk} />, document.getElementById('root'));
});

Answer 1

您是在Contentful Web应用程序中创建UI扩展还是使用命令行工具将其添加到Contentful？所有UI扩展都不能在独立的浏览器中使用，而只能作为Contentful Webapp中的iframe使用。检出新的create-contentful-extension工具以快速入门（more details here和here）

将外部React加载到html文件中

1 个答案: