我是ReactJS世界的新手,想知道如何将活动类名传递给<li>元素而不是<a>(Link)元素.
现在我有这种代码.单击时锚类会更改.
<li><IndexLink to='/' activeclassName='active'>A</IndexLink></li>
<li><Link to='/b' activeclassName='active'>B</Link></li>
<li><Link to='/c' activeclassName='active'>C</Link></li>
但我想得到类似的东西:
<li activeclassName='active'><IndexLink to='/'>A</IndexLink></li>
<li activeclassName='active'><Link to='/b'>B</Link></li>
<li activeclassName='active'><Link to='/c'>C</Link></li>
提前致谢
这是我的主要部分类，其中保留了链接的所有路由
export default class Section extends React.Component {
render() {
return (
<div style={{backgroundColor:"white"}}>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/discover" element={<Discover/>} />
<Route path="/shop/makeup" element={<Makeup/>} />
<Route path="/home/:id" element={<DetailsPage/>} />
</Routes>
</div>
)}}
这是我的卡片页面，它正在从上下文中获取数据。
import React from 'react';
import {DataContext} from './CardData.js';
import {Link} from 'react-router-dom'
import '../App.css';
export default class HomeCard extends React.Component {
static contextType = DataContext;
render(){
const {products} = this.context;
return (
<div>
<div className="card">
{ products.map((val,index)=>{
return(
<div className="card" key={val.id}>
<Card style={{ width: '14rem' …我在更改视图以响应路由时遇到问题.似乎我已经尝试了所有我可以谷歌没有运气.我只想显示用户列表,点击每个用户应导航到详细信息页面.这是路由器:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";
ReactDOM.render((
<BrowserRouter>
<div>
<Route path="/" component={Users} />
<Route path="/details" component={Details} />
</div>
</BrowserRouter>
), document.getElementById('app'))
当我使用网址/详细信息时,我的浏览器会导航到该网址,但不会更改视图.任何其他路线抛出404所以它似乎识别路线但不更新.
我正在尝试使用TypeScript的react路由器.但是,我在使用withRouter功能时遇到了一些问题.在最后一行,我得到了非常奇怪的错误:
Argument of type 'ComponentClass<{}>' is not assignable to parameter of type 'StatelessComponent<RouteComponentProps<any>> | ComponentClass<RouteComponentProps<any>>'.
Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any>>'.
Type '{}' is not assignable to type 'RouteComponentProps<any>'.
Property 'match' is missing in type '{}’
代码如下:
import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps, withRouter } from 'react-router-dom';
interface HomeProps extends RouteComponentProps<any> {
}
interface HomeState { }
class Home extends React.Component<HomeProps, HomeState> {
constructor(props: HomeProps) {
super(props);
}
public …在我的React容器/组件中,我可以使用哪种类型来引用matchReact Router DOM包含的部分？
interface Props {
match: any // <= What could I use here instead of any?
}
export class ProductContainer extends React.Component<Props> {
// ...
}
我的TranslationDetail组件在打开时传递一个id,并且基于此,在类构造函数中触发外部api调用,将数据接收到状态,并且此数据显示在TranslationDetail上.
//Routing:
<Route path="/translation/:id" component={TranslationDetail}/>
//Class:
class TranslationDetail extends Component {
constructor(props){
super(props);
this.props.fetchTrans(this.props.params.id);
}
如果我手动输入网址,这一切都正常.如果我想使用react-router例如显示下面的项目,如下所示,url确实会更改,但api调用不会被触发,并且数据将保持不变.
<button
type="button"
onClick={() =>
browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>
Next
</button>
请记住,我是一个初学者.发生这种情况的原因是我认为构造函数只运行一次,因此不会触发进一步的api调用.
我怎么解决这个问题？我是否需要列出道具并在变更时调用函数？如果有,怎么样？
你能告诉我如何在react js中呈现列表吗？我喜欢这个
https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview
class First extends React.Component {
constructor (props){
super(props);
}
render() {
const data =[{"name":"test1"},{"name":"test2"}];
const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;
return (
<div>
hello
</div>
);
}
}
我正在学习React自己的在线教程.
所以这是使用React Router的基本示例:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</Route>
</Router>
使用我的App组件:
class App extends React.Component {
render() {
return (
<div>
<ul>
<li><Link to="home">Home</Link></li>
<li><Link to="about">About</Link></li>
<li><Link to="contact">Contact</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
export default App;
但是,我在使用IndexRoute时遇到问题,因为它没有显示任何内容,所以我在npm上搜索react-router-dom v4的模块,里面没有IndexRoute.相反,它使用这个:
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
那么如何为1条路径渲染2个组件呢？
const rootEl = document.getElementById('root');
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/">
<MasterPage />
</Route>
<Route exact path="/details/:id" >
<DetailsPage />
</Route>
</Switch>
</BrowserRouter>,
rootEl
);
我正在尝试访问DetailsPage组件中的ID,但它无法访问.我试过了
<DetailsPage foo={this.props}/>
将参数传递给DetailsPage,但是徒劳无功.
export default class DetailsPage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="page">
<Header />
<div id="mainContentContainer" >
</div>
</div>
);
}
}
那么任何想法如何将ID传递给DetailsPage？
我搜索了一下,但我没有找到以下问题的明确答案:react-router中的hashHistory和browserHistory有什么区别？