Как использовать разрушение в JavaScript - во вспомогательной функции, которая будет передана компоненту React? - PullRequest
Новая
       12

Как использовать разрушение в JavaScript - во вспомогательной функции, которая будет передана компоненту React?

0 голосов
/ 08 октября 2018

У меня есть этот компонент, который принимает идентификатор в качестве атрибута: 

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

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Вы можете сделать условный рендеринг 

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

edit:

или даже проще, если эта вспомогательная функция используется только здесь 

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>
    )
}
0 голосов
/ 08 октября 2018

Вы не хотите, чтобы <Redirect to="/" /> передавалось как свойство TeamLogo, верно?Я бы просто использовал 

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