Динамическое отображение объектов с помощью Konva Js - ReactJs - PullRequest
Новая
       37

Динамическое отображение объектов с помощью Konva Js - ReactJs

0 голосов
/ 21 марта 2020

Я хочу визуализировать массив компонентов React с помощью Konva Js, не зная точно, какой объект я рисую в данный момент. Чтобы быть более точным c, вот мой код:

Один из компонентов React, который я хочу визуализировать, настенный. js: 

class CWall extends React.Component {
 render() {
    return (
      <React.Fragment>
        <Rect /*some props*/></Rect>
        <Transformer /*some props*/></Transformer>
      </React.Fragment>
    )
  }
}

В другом компоненте я создаю CWall при нажатии кнопки, planmenu. js: 

class PlanMenu extends React.Component {
  render() {
    ...
    return (
    ...
        <button type="button"
          onClick={() => { addObject(
            new CWall({
                x: 100,
                y: 100,
                length: 200
            }))}}>Wall
        </button>
    )
  }
}

Созданные объекты передаются компоненту, который должен их отображать, planbuilder. js: 

import CWall from './objects/wall'

class PlanBuilder extends React.Component {
  render() {
    const { objects } = this.props
    return (
      <Stage>
        <Layer>
          {
            objects.map(function(object) {
              var ObjectType = object.constructor.name;
              /* the following line gives an error to me */
              return <ObjectType {...object.props} key={object.id} />;
            }, this)
          }
        </Layer>
      </Stage>
    );
  }
}

В указанной строке выдается ошибка:

у конвы нет узла с типом CWall

Однако, если я отрисовываю один CWall напрямую, я получаю его на экране, как и ожидалось. Это кажется мне доказательством того, что konva способна визуализировать объекты CWall: 

class PlanBuilder extends React.Component {
  render() {
    const { objects } = this.props
    return (
      <Stage>
        <Layer>
          <CWall x={100} y={100} length={200} />
        </Layer>
      </Stage>
    );
  }
}

Итак, мой вопрос: как правильно отображать объекты, не зная их точных типов? Заранее спасибо.

1 Ответ

1 голос
/ 21 марта 2020

В общем случае не следует добавлять компоненты React непосредственно в состояние. Вместо этого просто добавьте чистые данные о вашем приложении, а затем просто визуализируйте их. Это может быть так: 

class PlanMenu extends React.Component {
  render() {
    ...
    return (
    ...
        <button type="button"
          onClick={() => { addObject({ x: 10, y: 10, type: 'wall' })}}
        </button>
    )
  }
}


import CWall from './objects/wall'


const TYPES = {
   'wall' : CWall
};

class PlanBuilder extends React.Component {
  render() {
    const { objects } = this.props
    return (
      <Stage>
        <Layer>
          {
            objects.map(function(object) {
              const Component = TYPES[object.type];
              return <Component {...object} key={object.id} />;
            }, this)
          }
        </Layer>
      </Stage>
    );
  }
}
...