Question

我有3个组件， TypeList ， ConnectedType （=connect(mapStateToProps)(Type）和类型。 Type将从TypeList（onClick, name）接收道具，传递道具到ConnectedType以及ConnectedType的mapStateToProps（onMiniPokemonClick, miniPokemon）。如何在映射之前检查miniPokemon是否存在？是否可以在功能组件上执行逻辑，还是必须使其成为类并在其中创建辅助函数？

const Type = ({onClick, name, onMiniPokemonClick, miniPokemon}) => (
  <li
    onClick={onClick}
  >
    {name}
    <ul>
      {
        if (miniPokemon) {
          miniPokemon.map(function (pokemon, idx) {
            return (<MiniPokemon onClick={() => onMiniPokemonClick(pokemon.name)} name={pokemon.name}/>)
          })
        }
      }
    </ul>
  </li>
)

Answer 1

您需要做的就是使用括号来允许多行函数体

const Type = ({onClick, name, onMiniPokemonClick, miniPokemon}) => {
   // some logic   
   return (
      <li
        onClick={onClick}
      >...
      </li>
   )
}

或者，如果您需要确保{null}未定义值时miniPokemon是一个数组 - 您可以提供一个默认参数：

({onClick, name, onMiniPokemonClick, miniPokemon = []})

检查功能react redux组件中从mapStateToProps传递的props的真实性

1 个答案: