只向一页添加文本区域

顺晟科技

2021-07-10 10:57:33

我正在使用ReactJS开发一个网站。我只想在其中一页上添加一个textarea。每个页面都有一个标题和一个内容标记。如果我将代码放在app.js中，它将显示在每个页面上:

import react from 'react';


import Header from './Header.js';

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


 
    class Content extends react.Component {
       render() {
          return (
             <div>


           <h1 className='center bold'>Hi</h1>
           <textarea id='editor' rows="25" cols="90"></textarea>

         </div>
      );

       }
    }

    export default App;

然后我就有了网页Javascript，code.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

和HTML标记code.HTML:

创建

<body>
  <header></header>
  <content></content>
  <div>
  <textarea id='editor' rows="25" cols="90">
  </textarea>
</div>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="app"></div>
</body>

我曾试图把textarea放在许多不同的地方，但没有成功。它要么不呈现，要么在页面上呈现。

如何使其仅显示在希望的页面上？

顺晟科技：

请在app.js中取一个状态值，如下所示。state={currentpage:“”} 然后在app.js中编写一个函数来更改这个状态值。 pageChangeHandler=(value)={this.setState（{currentPage：val}）}。现在将this.state.currentPage和this.PageChangeHandler作为道具传递给5个页面中的每一个。在要放置textarea的页面内，使用Props中的currentPage进行检查。在更改页面时，请调用函数this.props.PageChangeHandler（）并传递当前页面。我希望这能解决你的问题！请告诉我！

上一篇：.html 文件用iframe嵌入下一篇：如何创建五页web列

网站建设

Html

只向一页添加文本区域