尝试从 Backbone 视图渲染 React 组件会产生一个没有任何信息的错误

Question

我有这个非常简单的 React 应用程序，它仅用于使用 TinyMCE 编辑角色描述。

它作为独立应用程序运行良好，但我想在使用 Backbone.

的旧版 WebApp 游戏中使用它

每当我启动 Backbone 应用程序游戏并转到应该呈现新 React 组件的 Backbone 视图时，我只会收到一个简单的错误，显示 Error: Invariant Violation: _

控制台或任何地方都没有其他信息。

我有什么地方做错了吗？

这是我使用 TinyMCE 的 React 应用程序：

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class CharacterTextApp extends React.Component {
  handleEditorChange = (content, editor) => {
    console.log('Content was updated:', content);
  }

  render() {
    return (
      <Editor
        initialValue="<p>Your Character</p>"
        init={{
          height: 300,
          menubar: false,
          plugins: [
            'lists link image preview',
            'media paste help'
          ],
          toolbar:
            'undo redo | bold italic | \
            alignleft aligncenter alignright | \
            indent | help | image |'
        }}
        onEditorChange={this.handleEditorChange}
      />
    );
  }
}

export default CharacterTextApp;

下面是我在 Backbone 视图网页游戏中尝试调用 React 组件的方式：

import Backbone from 'backbone';
import _ from 'underscore';
import template from 'text!./CharacterDescription.html';
import CharacterTextApp from 'new/components/CharacterTextApp';

export default Backbone.View.extend({
    className: 'characterData',
    template: _.template(template, null, { variable: 'ctx' }),

    initialize: function (args) {
        this.header = 'Your Character';
    },

    render: function () {
        this.$el.html(this.template({
            data: this.model.toJSON(),
            header: this.header
        }));
        
        this.renderCharacterTextApp();

        return this;
    },
    
    renderCharacterTextApp() {
    this.renderComponent(CharacterTextApp, {
        characterId: this.model.get('characterId'),
        onUpdate: (newId) => this.model.save('characterId', newId, {wait: true}),
    }, '#characterInformation');
    },
});

Answer 1

就我而言，这是我从 Backbone 视图渲染 React 组件的方式。

假设我有一个名为 myReactComponent 的 React 组件，我想传入一个 ID 和一些数据。 #myDiv 是我想要放置 React 组件的 DOM 元素。

在 Backbone 视图中：

this.renderComponent(myReactComponent, { someId: this.model.myId, someData: this.model.myData }, '#myDiv');

在 React 组件中，确保您使用传递的 props：

render() {
    const { someId, someData} = this.props;

就是这样！一旦我这样设置它，它就可以正常工作了！

尝试从 Backbone 视图渲染 React 组件会产生一个没有任何信息的错误

Trying to render a React component from a Backbone View produces an error with no information

tinymce

backbone.js

backbone-views

reactjs