如何訪問外部文件中的組件

Question

首先，為我的語法錯誤道歉。 我的英語水平不好。

我創建了一個項目，您可以在其中創建帶有圖層的自己的地圖，好嗎？

然后將地圖導出到iframe中，這樣就可以在index.html文件中加載一個或多個地圖。

我在項目內部創建了一個API，我想從index.html訪問此API。

如何訪問？

我已閱讀到我可以使用進行訪問：

• 全局變量
• 具有反應上下文
• 帶.env變量

哪個更好的選擇？

如何在我的index.html中聲明它？

這是我的代碼：

class APIService extends Component {

    constructor(props) {
        super(props);
        this.logged = (this.props.userLogged && this.props.userLogged.logged) ? true : false;
        this.interval = undefined;
    }

    componentWillUnmount() {
        clearInterval(this.interval);
        this.interval = undefined;
    };

    getUserLayers = () => {
        if (!this.logged) return null; 
        const userlayers = this.props.layers.filter(l => l.name).map(l => {
            return { id: l.id, name: l.name, order: l.order };
        });
        return userlayers;
    };

    getVisibilityLayerById = (id) => {
        if (!this.logged) return null; 
        let index = this.props.layers.findIndex(l => l.id === id);
        if (index === -1) return null;
        return (this.props.layers[index] && this.props.layers[index].layout && this.props.layers[index].layout.visibility) ? this.props.layers[index].layout.visibility : null;
    };

    getVisibilityLayerByOrder = (order) => {
        if (!this.logged) return null; 
        let index = this.props.layers.findIndex(l => l.order === order);
        if (index === -1) return null;
        return (this.props.layers[index] && this.props.layers[index].layout && this.props.layers[index].layout.visibility) ? this.props.layers[index].layout.visibility : null;
    };

    changeVisibilityLayerById = (id) => {
        if (!this.logged) return null; 
        let index = this.props.layers.findIndex(l => l.id === id);
        if (index === -1) return null;
        let layer = this.props.layers[index];
        this.props.changeLayerVisibility(layer);
    };

    changeVisibilityLayerByOrder = (order) => {
        if (!this.logged) return null; 
        let index = this.props.layers.findIndex(l => l.order === order);
        if (index === -1) return null;
        let layer = this.props.layers[index];
        this.props.changeLayerVisibility(layer);
    };

    changeLayerVisibilityWithIntervalById = (id, interval) => {
        if (!this.logged) return null;
        setInterval( () => {
            this.changeVisibilityLayerById(id);
        }, interval);
    };

    changeLayerVisibilityWithIntervalByOrder = (order, interval) => {
        if (!this.logged) return null;
        setInterval( () => {
            this.changeVisibilityLayerByOrder(order);
        }, interval);
    };

    getCenter = () => {
        if (!this.logged) return null;
        let properties = (this.props.properties !== null) ? Object.assign({}, this.props.properties) : null;
        let hasCenter = (properties !== null && Object.keys(properties).filter(p => p === "center")) ? true : false;
        let hasLatAndLong = (hasCenter) ? Object.keys(properties.center).filter(c => c === 'latitude' || c === 'longitude') : null;
        let center = (hasLatAndLong !== null && hasLatAndLong.length === 2) ? true : false;
        return (center) ? properties.center : null;
    };

    setCenter = (latitude, longitude) => {
        if (!this.logged) return null;
        if ( isNaN(latitude) || isNaN(longitude) ) return null;
        this.props.setCenter({ latitude: latitude, longitude: longitude });
    };

    getZoom = () => {
        if (!this.logged) return null;
        let properties = (this.props.properties !== null) ? Object.assign({}, this.props.properties) : null;
        let hasZoom = (properties !== null && Object.keys(properties).filter(p => p === "zoom")) ? true : false;
        return (hasZoom !== null) ? properties.zoom : null;
    };

    setZoom = (zoom) => {
        if (!this.logged) return null;
        let checkedZoom;
        if (Array.isArray(zoom)) checkedZoom = zoom;
        else checkedZoom = [zoom];
        this.props.setZoom(checkedZoom);
    };

    render() { return null };
}

function selectStateApp(state) {
    return {
        userLogged: state.auth.userLogged,
        layers: state.maplayers.mapGLlayers,
        properties: state.map.properties,
    };
}

export default compose(withTranslation('maps'), connect(
    selectStateApp,
    dispatch => ({
        changeLayerVisibility: (layer) => LayerActions.changeLayerVisibility(layer)(dispatch),
        setCenter: (center) => MapActions.setCenter(center)(dispatch),
        setZoom: (zoom) => MapActions.setZoom(zoom)(dispatch),
        setProperties: (properties) => MapActions.setProperties(properties)(dispatch),
    })
))(APIService);

Answer 1

如果我理解正確，那么您基本上想將React組件呈現到DOM中，對嗎？ 如果是這樣的話，這就是官方的React文檔： Rendering Elements 。

另外，如果您想像在其他任何可以在任何地方使用的HTML元素一樣使用React組件，則可以考慮將React組件包裝在Web組件中 。 官方的React文檔還具有以下內容： 在Web組件中使用React 。 您的組件看起來像這樣：

class APIServiceElement extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('div');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    ReactDOM.render(<APIService />, mountPoint);
  }
}
customElements.define('api-service', APIServiceElement);

之后，您可以在index.html文件中使用<api-service></api-service> 。