【发布时间】：2020-11-26 09:54:27
【问题描述】：
我是 react.js 的初学者，我必须在 react.js 中重新实现另一个系统。另一个系统使用 RequireJS，我不知道如何将它包含在 react 组件中。
我的渲染代码如下所示：
import React, {Component} from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'
import Neo4jDBService from "../../api/Neo4jDBService";
import {Helmet} from "react-helmet";
class WelcomeComponent extends Component {
constructor(props){
super (props)
this.handleSucessfulResponse = this.handleSucessfulResponse.bind(this)
this.handleErrorResponse = this.handleErrorResponse.bind(this)
this.state ={
letter : [],
selected: '',
welcomeMessage : '',
}
}
componentDidMount() {
console.log('didmount');
this.getLetterNames();
}
getLetterNames(){
console.log('filter')
var counter = 0;
Neo4jDBService.retrieveAllLetterNames()
.then( response => {
response.data.map (data => {
console.log(data)
})
this.setState({letter: response.data})
});
}
initEditor(){
}
render() {
console.log('draw');
return (
<div>
<Helmet>
<title>Editor</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<meta charSet="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link href="/../../standoff-properties-editor-master/css/bootstrap.min.css" type="text/css"/>
<link href="/../../standoff-properties-editor-master/css/bootstrap-theme.min.css" type="text/css"/>
<link href="/../../standoff-properties-editor-master/css/font-awesome.css" type="text/css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="/../../standoff-properties-editor-master/css/app/editor.css" type="text/css"/>
</Helmet>
<body style={{backgroundColor: 'blue'}}>
<div style={{display: 'none'}} id="modal-nav"></div>
<section id="main-template">
<div data-bind="template: { name: 'text-edit-part-template', data: $data }"></div>
</section>
<script src="../../standoff-properties-editor-master/scripts/require.js"></script>
<script src="../../standoff-properties-editor-master/scripts//app/app.require.config.js"></script>
<script type="text/html" id="text-edit-part-template">
<div className="container" style={{marginTop: '40px'}}>
<div className="row">
<div className="col-md-6">
<label>
File
</label>
<div className="input-group">
<select className="form-control" data-bind="value: $data.file, options: $data.files, optionsText: 'text', optionsValue: 'value'"></select>
<span className="input-group-btn">
<button className="btn btn-primary" data-bind="click: $data.loadClicked">Load</button>
</span>
</div>
</div>
</div>
<div className="row" style={{marginTop: '20px'}}>
<div className="col-md-12">
<div className="row">
<div className="col-md-6">
<div>
<label>
Annotations
</label>
</div>
<button style={{borderBottom: '3px solid red'}} data-toggle="tooltip" data-original-title="Person"
className="btn btn-default tip" data-bind="click: $data.personClicked"><span className="fa fa-user"></span></button>
<button style={{borderBottom: '3px solid pink'}} data-toggle="tooltip" data-original-title="Place"
className="btn btn-default tip" data-bind="click: $data.placeClicked"><span className="fa fa-map"></span></button>
<button style={{borderBottom: '3px solid cyan'}} data-toggle="tooltip" data-original-title="Date"
className="btn btn-default tip" data-bind="click: $data.dateClicked"><span className="fa fa-clock-o"></span></button>
<button style={{borderBottom: '3px solid blue'}} data-toggle="tooltip" data-original-title="Event"
className="btn btn-default tip" data-bind="click: $data.eventClicked"><span className="fa fa-calendar"></span></button>
<button style={{borderBottom: '3px solid green'}} data-toggle="tooltip" data-original-title="Concept"
className="btn btn-default tip" data-bind="click: $data.conceptClicked"><span className="fa fa-lightbulb-o"></span></button>
<button style={{borderBottom: '3px solid yellow'}} data-toggle="tooltip" data-original-title="Text"
className="btn btn-default tip" data-bind="click: $data.textClicked"><span className="fa fa-file-text"></span></button>
<button style={{borderBottom: '3px solid lightgreen'}} data-toggle="tooltip"
data-original-title="Web Link" className="btn btn-default tip" data-bind="click: $data.webLinkClicked"><span
className="fa fa-link"></span></button>
<button style={{borderBottom: '3px solid yellow'}} data-toggle="tooltip" data-original-title="Footnotes"
className="btn btn-default tip" data-bind="click: $data.footnoteClicked"><span style={{fontWeight: 600}}>f</span></button>
<button style={{borderBottom: '3px solid purple'}} data-toggle="tooltip" data-original-title="Domain" className="btn btn-default tip" data-bind="click: $data.domainClicked"><span>|</span></button>
</div>
<div className="col-md-2" style={{paddingTop: '20px', paddingLeft: '40px'}}>
<label>Expansions</label>
<input data-bind="checked: $data.checkbox.expansions" type="checkbox"/>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<div data-role="editor" spellCheck="false" contentEditable="true" className="editor"></div>
<div data-role="monitor" className="form-control monitor"></div>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<button className="btn btn-default" data-bind="click: $data.cancelClicked">Cancel</button>
<button className="btn btn-primary" data-bind="click: $data.saveClicked">Save</button>
</div>
</div>
<hr />
<div className="row">
<div className="col-md-12">
<button className="btn btn-primary" data-bind="click: $data.unbindClicked">Unbind</button>
<button className="btn btn-primary" data-bind="click: $data.bindClicked">Bind</button>
</div>
</div>
<div className="row" style={{marginTop: '10px'}}>
<div className="col-md-12">
<textarea className="form-control" rows="5" data-bind="value: $data.viewer"></textarea>
</div>
</div>
</div>
</div>
</div>
</script>
dsfdsffsdfsdsfd
</body>
<script>
var editor;
require(["part/text-edit", "jquery"], function (Editor, $) {
//
// This ensures that tooltips are applied to all targets, whether or not they are dynamically created.
//
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
var urlParams = new URLSearchParams(window.location.search);
var file = urlParams.get("file");
var node = document.getElementById("main-template");
$.get(file, function (json) {
var editor = new Editor({
template: node,
editor: json
});
editor.applyBindings(node);
});
});
</script>
</div>
)
}
handleSucessfulResponse(response) {
this.setState({welcomeMessage: response.data.message})
}
handleErrorResponse(error) {
//console.log(error.response);
this.setState({welcomeMessage: error.response.data.message})
}
}
export default WelcomeComponent
但是，我收到以下错误消息：
./src/components/todo/WelcomeComponent.jsx 第 172:23 行：解析错误：意外令牌，预期为“}”
170 | $("body").tooltip({ 171 |选择器：'[data-toggle="tooltip"]'
172 | }); | ^ 173 | var urlParams = 新的 URLSearchParams(window.location.search); 174 | var 文件 = urlParams.get("文件"); 175 | var node = document.getElementById("main-template");
我可以在哪里以及如何使用/集成
var editor;
require(["part/text-edit", "jquery"], function (Editor, $) {
//
// This ensures that tooltips are applied to all targets, whether or not they are dynamically created.
//
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
var urlParams = new URLSearchParams(window.location.search);
var file = urlParams.get("file");
var node = document.getElementById("main-template");
$.get(file, function (json) {
var editor = new Editor({
template: node,
editor: json
});
editor.applyBindings(node);
});
});
</script>
脚本函数到我的 React 组件中？非常感谢提前
【问题讨论】：
-
这能回答你的问题吗？ Using reactjs with requirejs
-
非常感谢您的快速回复。我也找到了这个条目，但我不确定 require 调用是否在正确的位置以及如何将我的代码放入 React.render 函数中。你能给我一点启动帮助吗？