我想解决的是,如何渲染到一个特定的页面,每当用户点击动态网址?在"product_list"api数据中有一个键"url",每当用户点击这个"url",那么用户将被重定向到另一个特定的"product_detail"页面特定的页面?所以每当用户点击网址时,用户会看到一个特定的用户界面页面,而不是动态网址页面。
我可能是新手。我试图解决这个问题,但我不知道我哪里做错了。如果有人能帮我解决我要解决的问题,那就太好了。事先非常感谢你。
//产品列表api数据--
[
{
"url": "http://localhost:8000/api/p/product01",
"id": 19,
"title": "product01",
"slug": "product01",
"description": "product01descc",
"image": "http://localhost:8000/media/google.com/images/tet0.png",
"price": 1,
"status": true,
"created_on": "2020-04-19T03:45:12Z"
},
{
"url": "http://localhost:8000/api/p/product02",
"id": 20,
"title": "product02",
"slug": "product02",
"description": "product01descc",
"image": "http://localhost:8000/media/google.com/images/tet0.png",
"price": 2,
"status": true,
"created_on": "2020-04-19T03:45:12Z"
}
]
产品详细api特定产品列表的数据,例如产品-01。
{
"id": 19,
"title": "product01",
"slug": "product01",
"description": "product01descc",
"image": "http://localhost:8000/media/google.com/images/tet0.png",
"price": 1,
"created_on": "2020-04-19T03:45:12Z",
"status": true,
"color": 1,
"size": 1,
"product_category": []
}
./src/productList.js
import React, {Component} from "react";
import Contacts from './productListHook.js';
export default class App extends Component{
state = {
contacts: [
]
}
contactList() {
fetch('http://localhost:8000/api/p_list')
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log)
}
render(){
return(
<Contacts contacts={this.state.contacts} />
)
}
}
在本页中,每当我试图呈现用户时,当用户单击“标题”时,如您在下面看到的。但该页面将用户呈现到api详细信息页面。显然,这是因为我没有将api详细信息页面实现为用户将看到UI详细信息页面的特定页面。如何在reactjs中实现这一点
./src/productListHook。js
import React from 'react'
const Contacts = ({ contacts }) => {
return (
{contacts.map((contact) => (
<img src={contact.image} alt="" class="img-fluid" />
<h3> <a href={contact.url}>{contact.title}</a> </h3>
))}
)
};
export default Contacts
对于动态URL,您可能不想使用绝对路径。考虑转移到查询参数。
将url更改为http://localhost:8000/api/p?id=product01.在路由中,为url呈现ProductDetailContainer
http://localhost:8000/api/p'.
function ProductDetailContainer() {
const query = new URLSearchParams(useLocation().search); // useLocation in react-router
return <ProductDetail id={query.get('id')} />;
}
function ProductDetail({id}) {
return ({id}); // Render details based on the ID fetched.
}
上面的代码没有经过测试。请相应调整:)
希望有帮助。
另一种方法是添加
//Contacts.js
import React from "react";
import { Link } from "react-router-dom";
const Contacts = ({ contacts }) => {
return (
<div>
{contacts.map((contact) => (
<div key={contact.id>>
<img src={contact.image} alt="" className="img-fluid" />
<h3>
{" "}
<Link
to={{
pathname: `/productdetails/${contact.id}`,
contact: contact,
}}
>
{contact.title}
</Link>
</h3>
</div>
))}
</div>
);
};
export default Contacts;
//App.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import ProductDetails from "./ProductDetails";
function App() {
return (
<div className="App">
<Switch>
<Route exact path="/" component={Home} />
<Route path="/productdetails/:slug" component={ProductDetails} />
</Switch>
</div>
);
}
export default App;
App.js
中的Home
组件将是问题中的App.js
。
//ProductDetails.js
import React from "react";
import { useLocation } from "react-router-dom";
function ProductDetails({ location }) {
const { contact } = location;
console.log(contact);
let queryParams= useLocation();
console.log(queryParams)
return (
<div>
<h1>Product Details Page</h1>;
</div>
);
}
export default ProductDetails;
在
ProductDetails
组件中,您可以访问queryParams
和从Contacts
组件传递下来的道具,您可以使用这些道具发出额外的API请求以呈现数据。
当我们点击“添加”链接时,我试图呈现需要组件。下面是主要组件的代码: 下面是以防万一的需求组件: 我在第一次单击add链接时实现了我试图实现的目标,即在第一次单击add链接时,need组件没有任何条件地被呈现,当我单击“add”时,need组件再次被呈现,但当我第二次单击“add”链接时,我没有看到任何变化。为什么会这样,我希望在每次单击“Add”链接时呈现Need组件。
问题内容: 我试图将我在教程中找到的一些代码转换为自己使用。最初,当用户单击我的应用程序生成的通知时,该代码启动了系统联系人列表。我正在尝试自己启动一个,而不是启动联系人列表,但是它不起作用。更具体地说,什么也没有发生。没有错误,我也不会加载。单击后,通知窗口消失,原始窗口仍然可见。 这是我的代码: 这是我在文件中的条目… 这是我要启动的… 问题答案: 我解决了这个问题。我忘记在清单文件的活动声明
问题内容: 我将如何在表单中添加功能,以便用户可以通过单击“添加”来添加更多输入字段。这使用了角度正式库。 这是确切功能的示例,但仅使用angularjs完成。 动态添加表单字段 问题答案: 看到这个plnkr 这是您需要的示例。正如您在插件中看到的那样,可以通过单击按钮动态创建一个。单击按钮也可以删除创建的内容。 请参阅下面的 HTML 和 JS 将如下
我正在使用贝宝快捷结账按钮。问题是,如果用户更改付款金额,paypal按钮将再次呈现。当我点击paypal按钮时,有没有办法渲染该按钮?我与贝宝结帐工作。js https://developer.paypal.com/docs/archive/checkout/integrate/# 更新:在web组件中工作,所以所有代码都在renderedcall back()中
我正在使用可点击的下拉菜单进行导航。下拉列表使用输入标记。我陷入困境的地方是,如果访问者单击页面上的其他地方,我需要关闭下拉列表。我正在尝试使用目标属性、matches()方法和onclick事件。 我在控制台中注意到的是,当我打开下拉列表时,两个条件语句都出现了,下拉列表没有打开。这就好像下拉列表同时打开和关闭。 我做错了什么?我如何让它正常工作,以便用户只需打开下拉菜单,并在单击网页上的其他位
试图在用户删除数据时刷新页面。页面上的一些Html元素会自动更新,但主应用程序组件会保留旧数据,直到手动刷新页面。 不再像本例所示那样工作:如何在ionic 4中刷新页面 我尝试改用ngonit(),但没有成功。我也尝试过ChangeDetectorRef,但没有乐趣。 类型脚本 html 数据来自此。内容