Question

我想做的是调用一个函数，该函数将根据val等于什么返回一个className，但是我在调用函数时出错，或者可能是我返回classNames的方式出错。有人可以告诉我正确的方法吗？我认为错误在于checker（）的调用方式。

const checker = val => {
  if (val === "A")
    return "typeA"
  else if (val === "B")
    return "typeB"
  else 
    return "typeC"
}

const Button = props => {
    <div className={checker(props.children)}>{props.children}</div>
}

Answer 1

似乎您缺少return语句：

const Button = props => {
  return (<div className={checker(props.children)}>{props.children}</div>);
}

您可以将其缩短一点：

const Button = props => (
  <div className={checker(props.children)}>{props.children}</div>
);

注意，我已将您的{和}更改为(和)。

代码中的其他部分应该可以工作。

<Button>A</Button>

将呈现<div class="typeA">A</div>

调用函数返回className

1 个答案: