尝试从 Backbone 视图渲染 React 组件会产生没有信息的错误答案

【问题标题】：Trying to render a React component from a Backbone View produces an error with no information尝试从 Backbone 视图渲染 React 组件会产生没有信息的错误
【发布时间】：2021-03-15 16:04:17
【问题描述】：

我有一个非常简单的 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');
    },
});

【问题讨论】：

标签： reactjs backbone.js tinymce backbone-views

【解决方案1】：

在我的例子中，这是我从 Backbone 视图渲染 React 组件的方式。

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

在主干视图中：

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

在 React 组件中，确保你使用了被传递的 props：

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

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

【讨论】：