如何在 JavaScript 中使用解构——在将传递给 React 组件的辅助函数中？答案

【问题标题】：How to use destructing in JavaScript — in a helper function which will be passed to a React component?如何在 JavaScript 中使用解构——在将传递给 React 组件的辅助函数中？
【发布时间】：2018-10-08 20:51:41
【问题描述】：

我有这个以 id 作为属性的组件：

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

如您所见，它是附加到对象的属性。

所以我想出的是：

/* helper function */

  function TeamIdChecker({ id }) {
      if (id === undefined) return <Redirect to="/" />;
      else return team.id;
  }

然后我想这样使用它：

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

我没有尝试，因为我知道我已经离开了！

提前感谢我的朋友们！

更新这是我的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);
  }
}

这是我的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>
  );
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 destructuring

【解决方案1】：

您不希望将 <Redirect to="/" /> 作为属性传递给 TeamLogo，对吗？我只是使用

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

【讨论】：

实际上我猜如果传递给 TeamLogo 的属性是 undefined 我希望重定向被启动，否则 team.id 只是被传递给 <TeamLogo />
那么如何在辅助函数中编写/声明变量呢？
我仍然不确定您真正想要什么。你想把逻辑放在TeamLogo 里面吗？或者你真的需要一个辅助函数吗？这个 sn-p 在哪里（以及多久）使用？
嗯——好问题。我想要发生的事情是，如果有人去 URL 并输入 /teams/foo，你会遇到重定向的情况。

【解决方案2】：

你可以做一些条件渲染

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

然后

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

编辑：

如果这个辅助函数只在这里使用，甚至更简单

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

【讨论】：