reactjs - 如何让我的 React 应用程序分别处理每个组件实例?
问题描述
我正在尝试测试 TinyMCE 如何处理 React 中的多个编辑器。
在这个小例子中,我只有 3 个,但最多可能有 100 个。
我的问题是,我不认为每个都被视为单独的实例,而是一个实例。
我没有收到任何错误,但是当我编辑一个时,编辑出现在所有 3 个中。
有没有办法让 TinyMCE 知道哪个编辑器是哪个?
import React from 'react';
import TinyMCEComponent from './TinyMCEComponent';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/editor_1">Editor One</Link>
</li>
<li>
<Link to="/editor_2">Editor Two</Link>
</li>
<li>
<Link to="/editor_3">Editor Three</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/editor_1">
<TinyMCEComponent />
</Route>
<Route path="/editor_2">
<TinyMCEComponent />
</Route>
<Route path="/editor_3">
<TinyMCEComponent />
</Route>
</Switch>
</div>
</Router>
);
}
这就是 TinyMCE 所在的地方:
import React from 'react';
import { Editor } from '@tinymce/tinymce-react';
const TinyMCEComponent = () => {
const handleEditorChange = (content, editor) => {
console.log('Content was updated:', content);
}
return (
<Editor
apiKey="abc123"
initialValue="<p>This is the initial content of the editor</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | help'
}}
onEditorChange={handleEditorChange}
/>
);
}
export default TinyMCEComponent;
谢谢!
解决方案
最简单的解决方案是给每个 a key
。
import React from 'react';
import TinyMCEComponent from './TinyMCEComponent';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/editor_1">Editor One</Link>
</li>
<li>
<Link to="/editor_2">Editor Two</Link>
</li>
<li>
<Link to="/editor_3">Editor Three</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/editor_1">
<TinyMCEComponent key="ed1" />
</Route>
<Route path="/editor_2">
<TinyMCEComponent key="ed2" />
</Route>
<Route path="/editor_3">
<TinyMCEComponent key="ed3" />
</Route>
</Switch>
</div>
</Router>
);
}
推荐阅读
- node.js - 快递中的 res.write() 不适用于图像标签
- assembly - 如何将我的代码上传到 6502 处理器?
- c# - DisplaySettingsChanged SystemEvent NotFiring In IIS 或 WindowsService
- c# - Unity C#如何获取玩家的国家、城市或位置
- python - 在 Django 中删除用户几天后删除用户的文件
- php-telegram-bot - 我如何计算与@ChannelButtonsBot 或@likebot 相同的inlineKeyboardButton 点击次数?
- json - 编写自定义插件,它可以处理并返回正文中格式错误的 JSON 的正确错误
- flutter - 我需要对此代码进行哪些更改,以便它不会显示来自数据库的实时更改..但仅在刷新时加载新数据。?
- python - Got a ValueError: Expected 2D array, got 1D array 而不是将我的图像数据放入决策树分类器
- c++ - 我如何从列表小部件的项目中搜索??,