[英]How access to react component from external file
First of all, apologies for my grammatical errors. 首先,为我的语法错误道歉。 My English level is not good.
我的英语水平不好。
I've created a project where you can create your own maps with layers, ok? 我创建了一个项目,您可以在其中创建带有图层的自己的地图,好吗?
And I export my map inside an iframe, so I can load one or multiples maps in a index.html file. 然后将地图导出到iframe中,这样就可以在index.html文件中加载一个或多个地图。
I've created an API inside my project and I want to access this API from my index.html. 我在项目内部创建了一个API,我想从index.html访问此API。
How can access it?? 如何访问?
I have read that I can access with a : 我已阅读到我可以使用进行访问:
Which is better option?? 哪个更好的选择?
How can declare it in my index.html?? 如何在我的index.html中声明它?
Here is my code: 这是我的代码:
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);
If I understand correctly, you basically want to render your React component into the DOM, right? 如果我理解正确,那么您基本上想将React组件呈现到DOM中,对吗? If so, here's the official React documentation just for that: Rendering Elements .
如果是这样的话,这就是官方的React文档: Rendering Elements 。
Alternatively, if you want to use your React Component just like any other HTML Element that can be used anywhere, you can consider wrapping your React Component inside a Web Component . 另外,如果您想像在其他任何可以在任何地方使用的HTML元素一样使用React组件,则可以考虑将React组件包装在Web组件中 。 The official React documentation also has that: Using React in your Web Components .
官方的React文档还具有以下内容: 在Web组件中使用React 。 It would look something like this for your component:
您的组件看起来像这样:
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);
And after that you can use <api-service></api-service>
in your index.html
file. 之后,您可以在
index.html
文件中使用<api-service></api-service>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.