问题描述
我有一个非常简单的 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;
就是这样!一旦我像这样设置它,它就可以正常工作!