Пользовательский веб-компонент из библиотеки в React - PullRequest
Новая
       5

Пользовательский веб-компонент из библиотеки в React

0 голосов
/ 30 января 2020

У меня есть приложение React, которое должно использовать следующую библиотеку: MICO-grapheditor

И я хочу написать этот код: 

render() {
    var webgraph = require("@ustutt/grapheditor-webcomponent");
    GraphEditor.
    return (
        <network-graph classes="red blue" mode="layout" zoom="both">
            <style slot="style">
                svg {width:100%; height: 100%}
            </style>
            <svg slot="graph"></svg>
        </network-graph>
    )
}}

Но я получаю следующее:

TS2339: свойство 'network-graph' не существует для типа 'JSX.IntrinsicElements'.

Как устранить эту ошибку?

Ответы [ 2 ]

0 голосов
/ 30 января 2020

React, вероятно, предполагает, что network-graph является компонентом React, поэтому он ожидает, что используемые вами атрибуты (mode и zoom) определены в компоненте React. Также React использует className вместо classes.

Когда вы пишете между тегами <network-graph>, это содержимое рассматривается как группа дочерних узлов, которые могут использоваться сетевым графом * 1011. * компонент следующим образом: 

import React, { Component } from "react";

class NetworkGraph extends Component {
  render() {
    const {mode, zoom, children} = this.props;
    return (
      <>{children}</>
    ); // children would contain the <svg>
  }
}

Когда вам требуется MICO-grapheditor, вы импортируете не компонент React, а веб-компонент, даже если React пытается его интерпретировать ...

Кроме того, избегайте добавления тегов <style> в возвращаемом рендере. Стили CSS в React могут быть импортированы в такие компоненты, как import './my-styles.css';.

0 голосов
/ 30 января 2020

Как минимум выражение 

var webgraph = require("@ustutt/grapheditor-webcomponent");

должно появиться перед рендерингом. Кроме того, выполнение CSS в HTML и Node.js / React - это не то же самое. Или это?

...