React项目如何实现textarea仅在指定单页面渲染

前置操作 #

先删除code.html中<body>标签内硬编码的<textarea id='editor' rows="25" cols="90"></textarea>代码，这段代码不属于React渲染逻辑，会在所有加载该HTML的页面固定展示，必须先移除。

• 安装依赖：执行命令npm install react-router-dom@6
• 修改App.js代码如下：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './Header.js';

// 首页组件：不含textarea
const HomePage = () => (
  <div>
    <h1 className='center bold'>Hi</h1>
  </div>
);

// 指定页面组件：带textarea
const EditorPage = () => (
  <div>
    <h1 className='center bold'>编辑器</h1>
    <textarea id='editor' rows="25" cols="90"></textarea>
  </div>
);

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Header />
          <Routes>
            {/* 首页路由 */}
            <Route path="/" element={<HomePage />} />
            {/* 指定展示textarea的页面路由 */}
            <Route path="/editor" element={<EditorPage />} />
            {/* 其他页面路由依次配置即可 */}
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

配置完成后，仅访问/editor路径的页面会显示textarea，其他页面无该组件。

如果你的项目是多页应用（每个页面对应独立打包入口和HTML模板），直接将textarea封装为独立组件，仅在需要展示的页面对应的入口文件中引入渲染即可，不需要展示的页面不要引入该组件。

若暂时不想引入路由，可通过路径判断控制textarea是否渲染，修改App.js如下：

import React from 'react';
import Header from './Header.js';

class Content extends React.Component {
  render() {
    // 自定义判断条件，示例为仅路径包含/editor时展示textarea
    const shouldShowEditor = window.location.pathname.includes('/editor');
    return (
      <div>
        <h1 className='center bold'>Hi</h1>
        {shouldShowEditor && <textarea id='editor' rows="25" cols="90"></textarea>}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
      </div>
    );
  }
}

export default App;

内容的提问来源于stack exchange，提问作者rigamonk