[英]How to use destructing in JavaScript — in a helper function which will be passed to a React component?
I have this component which takes an id as an attribute: 我有这个组件,将id作为属性:
<TeamLogo id={team.id} className="center" />
As you can see its a property attached to an object. 如您所见,它是附加到对象的属性。
So what I came up with is: 所以我想出的是:
/* helper function */
function TeamIdChecker({ id }) {
if (id === undefined) return <Redirect to="/" />;
else return team.id;
}
And then i'd like to use it like this: 然后我想像这样使用它:
<TeamLogo id={TeamIdChecker(team.id)} className="center" />
I didn't try it as I know I'm off! 我没试过,因为我知道我要离开了!
Thanks my friends in advance! 预先感谢我的朋友们!
Update This is my Team
component: 更新这是我的Team
组件:
import { Component } from "react";
import PropTypes from "prop-types";
import { getTeam } from "../api";
export default class Team extends Component {
static propTypes = {
id : PropTypes.string.isRequired,
children: PropTypes.func.isRequired
};
state = {
team: null
};
componentDidMount() {
this.fetchTeam(this.props.id);
}
componentWillReceiveProps(nextProps) {
if (this.props.id !== nextProps.id) {
this.fetchTeam(nextProps.id);
}
}
fetchTeam = id => {
this.setState(() => ({ team: null }));
getTeam(id).then(team => this.setState(() => ({ team })));
};
render() {
return this.props.children(this.state.team);
}
}
This is my TeamLogo
component: 这是我的TeamLogo
组件:
import React from "react";
import PropTypes from "prop-types";
const logos = {
// logo key and values
};
TeamLogo.propTypes = {
id: PropTypes.string.isRequired
};
TeamLogo.defaultProps = {
width: "200px"
};
export default function TeamLogo(props) {
return (
<svg {...props} x="0px" y="0px" viewBox="0 0 125.397 125.397">
{logos[props.id]}
</svg>
);
}
You don't want that <Redirect to="/" />
to be passed as a property to TeamLogo
, right? 您不希望将<Redirect to="/" />
作为属性传递给TeamLogo
,对吗? I'd just use 我只是用
if (team.id === undefined)
return <Redirect to="/" />;
else
return <TeamLogo id={team.id} className="center" />
You could do some conditional rendering 你可以做一些条件渲染
function TeamIdChecker({ id }) {
if (id === undefined) return false;
else return true;
}
then 然后
render() { // where your rendering your component
const { id } = team; // wherever that come from, you destruct it here
return(
<React.Fragment>
{TeamIdChecker(id) ? <TeamLogo id={id} className="center" /> : <Redirect to="/" />}
</React.Fragment>
)
}
edit: 编辑:
or even simpler if this helper function its only used here 甚至更简单(如果此辅助功能仅在此处使用)
render() { // where your rendering your component
const { id } = team; // wherever that come from, you destruct it here
return(
<React.Fragment>
{id !== undefined ? <TeamLogo id={id} className="center" /> : <Redirect to="/" />}
</React.Fragment>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.