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

如何解决尝试从 Backbone 视图渲染 React 组件会产生没有信息的错误

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

解决方法

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

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

在主干视图中：

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

在 React 组件中，确保您使用了传递的道具：

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

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