我怎样才能让我的 React 应用程序分别处理每个组件实例？

Question

我正在尝试测试 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;

谢谢！

Answer 1

最简单的解决方案是给每个人一个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>
  );
}

我怎样才能让我的 React 应用程序分别处理每个组件实例？

How can I let my React app treat each component instance separately?

reactjs

react-router

tinymce

react-router-dom

tinymce-5