在 React-Router 中动态使用 Link 组件
Using Link component dynamically in React-Router
根据存储在组件状态中的条件,我希望渲染的特定组件可以包装在 Link
标记或常规 div
标记中(或者没有标记就像好吧!)
我目前正在做的事情看起来很冗长和冗余;我觉得有一种更短的方法可以编写这个组件来保持我的代码干燥。
存储我的 linkThumbnail
和 defaultThumbnnail
组件的两个变量几乎完全相同,只是其中一个包含在 Link
组件中。
然后我在 return
语句中使用三元运算符来给我所需的组件。
这里有一些伪代码作为例子:
import React, { Component } from "react";
import { Link } from "react-router-dom";
class ExampleComponent extends Component {
state = {
renderLink: false
};
render() {
const linkThumbnail = (
<Link
to={{
pathname: `/someMovieId`,
state: 'some-data'
}}
>
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
</Link>
);
const defaultThumbnail = (
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
);
//here I use a ternary operator to show the correct component...shorter method of doing this?
return this.state.renderLink ? linkThumbnail : defaultThumbnail;
}
}
export default ExampleComponent;
尝试创建另一个将 this.state.renderLink
作为 prop 的组件:
const ThumbnailLink = ({enabled, children, ...props}) => {
if (enabled) {
return <Link {...props}>{children}</Link>;
} else {
return <div>{children}</div>;
}
}
class ExampleComponent extends Component {
render() {
return (<ThumbnailLink enabled={this.state.renderLink} to={{pathname: `/someMovieId`, state: 'some-data'}}>
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
</ThumbnailLink>);
}
}
根据存储在组件状态中的条件,我希望渲染的特定组件可以包装在 Link
标记或常规 div
标记中(或者没有标记就像好吧!)
我目前正在做的事情看起来很冗长和冗余;我觉得有一种更短的方法可以编写这个组件来保持我的代码干燥。
存储我的 linkThumbnail
和 defaultThumbnnail
组件的两个变量几乎完全相同,只是其中一个包含在 Link
组件中。
然后我在 return
语句中使用三元运算符来给我所需的组件。
这里有一些伪代码作为例子:
import React, { Component } from "react";
import { Link } from "react-router-dom";
class ExampleComponent extends Component {
state = {
renderLink: false
};
render() {
const linkThumbnail = (
<Link
to={{
pathname: `/someMovieId`,
state: 'some-data'
}}
>
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
</Link>
);
const defaultThumbnail = (
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
);
//here I use a ternary operator to show the correct component...shorter method of doing this?
return this.state.renderLink ? linkThumbnail : defaultThumbnail;
}
}
export default ExampleComponent;
尝试创建另一个将 this.state.renderLink
作为 prop 的组件:
const ThumbnailLink = ({enabled, children, ...props}) => {
if (enabled) {
return <Link {...props}>{children}</Link>;
} else {
return <div>{children}</div>;
}
}
class ExampleComponent extends Component {
render() {
return (<ThumbnailLink enabled={this.state.renderLink} to={{pathname: `/someMovieId`, state: 'some-data'}}>
<div>
<div className='movie' onClick={this.getMoviePreview}>
<img
src={
poster
? `https://image.tmdb.org/t/p/w300${poster}`
: "https://via.placeholder.com/300"
}
alt='something here'
/>
</div>
</div>
</ThumbnailLink>);
}
}