reactjs - 三元表达式意外令牌错误

Question

我在三元代码表达式中遇到了意外的令牌错误。错误消息指向 === 中的第一个 =。我在这里做错了什么？

const getMyHeader = (heading, advisorTags) => {
    if (advisorTags.length > 0) {
      return (
        <Typography
          variant="h6"
          component="h6"
          style={{
            heading === 'White Advantages'
              ? 'fontSize: 16'
              : 'fontSize: 16, paddingTop: 10'
          }}
        >
          {heading}
        </Typography>
      );
    } else {
      return '';
    }
  };

标签： reactjs

Answer 1

style prop 接受常规对象，'fontSize: 16, paddingTop: 10'不起作用，这很可能导致错误。

你可以试试这样的

const getMyHeader = (heading, advisorTags) => {
  if (advisorTags.length > 0) {
    let style = { fontSize: 16 };
    if(heading === 'White Advantages') {
      style.paddingTop = 10;
    }
    return (
      <Typography
        variant="h6"
        component="h6"
        style={style}
      >
        {heading}
      </Typography>
    );
  } else {
    return '';
  }
};