如何在JavaScript中使用销毁—；在将传递给React组件的辅助函数中？

我有一个将id作为属性的组件：

<TeamLogo id={team.id} className="center" />

这是我的

TeamLogo

组件：

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

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

从“React”导入React；
从“道具类型”导入道具类型；
常量徽标={
//标志关键和价值
};
TeamLogo.propTypes={
id:PropTypes.string.isRequired
};
TeamLogo.defaultProps={
宽度：“200px”
};
导出默认功能TeamLogo（道具）{
返回(
{logos[props.id]}
);
}

您不希望将该

作为属性传递给

TeamLogo

，对吗？我只要用

if (team.id === undefined)
  return <Redirect to="/" />;
else
  return <TeamLogo id={team.id} className="center" />

if（team.id==未定义）
返回；
其他的
返回

您不希望将该

作为属性传递给

TeamLogo

，对吗？我只要用

if (team.id === undefined)
  return <Redirect to="/" />;
else
  return <TeamLogo id={team.id} className="center" />

if（team.id==未定义）
返回；
其他的
返回

您可以执行一些条件渲染

function TeamIdChecker({ id }) {
  if (id === undefined) return false;
  else return true;
}

然后

render（）{//
const{id}=team；//不管它来自哪里，都在这里销毁它
返回(
{TeamIdChecker（id）？：}
)
}

编辑：

或者更简单，如果这个助手函数只在这里使用

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>
    )
}

render（）{//
const{id}=team；//不管它来自哪里，都在这里销毁它
返回(
{id！==未定义？：}
)
}

您可以执行一些条件渲染

function TeamIdChecker({ id }) {
  if (id === undefined) return false;
  else return true;
}

然后

render（）{//
const{id}=team；//不管它来自哪里，都在这里销毁它
返回(
{TeamIdChecker（id）？：}
)
}

编辑：

或者更简单，如果这个助手函数只在这里使用

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>
    )
}

render（）{//
const{id}=team；//不管它来自哪里，都在这里销毁它
返回(
{id！==未定义？：}
)
}

事实上，我想如果传递给TeamLogo的属性是未定义的，我想启动重定向，否则，

team.id

就会传递给

，那么我应该如何在helper函数中写入/声明变量？我仍然不确定您真正想要的是什么。是否要将逻辑放入

TeamLogo

？或者你真的需要一个助手函数吗？这段代码在哪里（多久一次）被使用？嗯，这是一个很好的问题。我想发生的是，如果有人转到URL并输入了

/teams/foo

，那么您就需要重定向了。实际上，我猜如果传递给TeamLogo的属性是

未定义的

，我希望可以启动重定向，否则，

team.id

会被传递到

，那么我该如何在helper函数中编写/声明变量呢？我仍然不确定您到底想要什么。是否要将逻辑放入

TeamLogo

？或者你真的需要一个助手函数吗？这段代码在哪里（多久一次）被使用？嗯，这是一个很好的问题。我想发生的是，如果有人转到URL并输入

/teams/foo

，您就会遇到重定向的情况。