gpt4 book ai didi

javascript - 基本 react 多页应用程序更改标题内容

转载 作者:行者123 更新时间:2023-11-29 23:18:44 27 4
gpt4 key购买 nike

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

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

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

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'));

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

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

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

export default Edit;

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

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

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

感谢您的帮助。

最佳答案

您可以将名为 description 的附加属性添加到您的 Header 组件,并在 Edit 组件中使用该新属性。

示例

//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>
);

关于javascript - 基本 react 多页应用程序更改标题内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51584797/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com