Javascript 基本反应多页应用程序更改标题内容_Javascript_Reactjs

Javascript 基本反应多页应用程序更改标题内容

javascript reactjs

Javascript 基本反应多页应用程序更改标题内容,javascript,reactjs,Javascript,Reactjs,我是个新手，所以如果我没有说清楚，我会事先道歉。我有一个基本的react应用程序，有一个非常基本的index.html页面。代码如下所示： <html> <head> <title></title> </head> <body> <div id="root"></div> <script src="bundle.js">

我是个新手，所以如果我没有说清楚，我会事先道歉。我有一个基本的react应用程序，有一个非常基本的index.html页面。代码如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
</html>

import React from 'react';
import { render } from 'react-dom';
import * as Redux from 'redux';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const Index = () => (
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
);

render(<Index />, document.getElementById('root'));

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

const Edit = () => (
    <Header title="Capture" />
);

export default Edit;

我在index.js文件中的代码如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
</html>

import React from 'react';
import { render } from 'react-dom';
import * as Redux from 'redux';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const Index = () => (
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
);

render(<Index />, document.getElementById('root'));

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

const Edit = () => (
    <Header title="Capture" />
);

export default Edit;

从“React”导入React；
从'react dom'导入{render}；
从“Redux”导入*作为Redux；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/screens”导入{Home、Edit、Search、Github、Mine、About}；
常数索引=（）=>(
);
render（，document.getElementById（'root'））；

我在edit.js中的代码如下所示：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
</html>

import React from 'react';
import { render } from 'react-dom';
import * as Redux from 'redux';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Home, Edit, Search, Github, Mine, About } from "./screens";

const Index = () => (
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/edit" component={Edit} />
        <Route path="/search" component={Search} />
        <Route path="/github" component={Github} />
        <Route path="/mine" component={Mine} />
        <Route path="/about" component={About} />
      </div>
    </Router>
);

render(<Index />, document.getElementById('root'));

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

const Edit = () => (
    <Header title="Capture" />
);

export default Edit;

从“React”导入React；
从“../components/Header”导入标题；
常量编辑=（）=>(
);
导出默认编辑；

此代码将“Capture”发送回header.js，header.js在名为title的变量中接收“Capture”的值，该变量显示在标记中

我要做的是将2个值从edit.js传递到header.js。我想在title变量中继续发送“Capture”的值，但我还想在名为description的变量中传回“This is the Capture function”的值。如您所见，header.js代码中已经有名为description的变量。它将被放置在标签中

如何修改edit.js中的代码以将2个值发送回edit.js

感谢您的帮助。

您可以在

标题组件中添加一个名为说明的附加道具，并在编辑组件中使用该新道具
示例
//Edit.js
const Edit = () => (
  <Header title="Capture" description="This is the capture function" />
);

//Header.js
const Header = (props) => (
  <div>
    <h1>{props.title}</h1>
    <h2>{props.description}</h2>
  </div>
);

//Edit.js
常量编辑=（）=>(
);
//Header.js
常数头=（道具）=>(
{props.title}
{props.description}
);
你也能分享header.js
代码吗？太好了！正是我想要的。非常感谢你！