功能表示组件中的JS代码

Question

仍在掌握React和ES6.我有以下功能演示组件,工作正常:

const Jobs = (props) => (
  <section id="jobs">
    <div>
      {
        props.jobs.map(job =>
          <div className="job" key={job.slug}>
            <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
            <p>{job.intro}</p>
          </div>
        )
      }
    </div>
  </section>
)

但是,当我尝试在括号之间添加一些额外的JS时,如下所示,我得到有关意外令牌的错误.

const Jobs = (props) => (
  <section id="jobs">
    <div>
      {
        console.log("THIS DOESN'T WORK")
        props.jobs.map(job =>
          <div className="job" key={job.slug}>
            <p><strong>{job.title} at <Link to={"/jobs/" + job.slug}>{job.company}</Link></strong></p>
            <p>{job.intro}</p>
          </div>
        )
      }
    </div>
  </section>
)

有人可以解释为什么这不起作用.

Answer 1

它与babel正在将代码转换成什么有关.

return <div>{myValue}</div>;

变

return React.createElement("div", null, myValue);

所以console.log在中间有一个随机的,比如

return <div>{
  console.log(myValue);
  myValue
}</div>;

会成为

return React.createElement("div", null, console.log(myvalue); myValue);

显然,这不再是有效的JavaScript.因此,在JSX转换中唯一有效的是一个计算单个值的表达式.

阅读其他答案的一些评论,我发现你实际上想要在JSX中做条件逻辑.

为此,您可以选择一些选项.

1.提取变量

let conditionalValue = "Loading";

if (condition)
  conditionalValue = myValue;

return <div>{conditionalValue}</div>;

2.提取方法

return <div>{renderValue()}</div>

...

renderValue() {
  if (condition)
    return myValue;

  return "Loading"
}

3.使用三元组

return <div>{condition ? myValue : "Loading"}</div>;

4.利用布尔评估

如果你想显示一些事情的后备

return <div>{myValue || "Loading"}</div>;

如果您只想根据条件显示某些内容

return <div>{condition && myValue}</div>;

注意:如果您myValue使用其他组件替换,上述所有示例都同样有效,例如<p>Hello World</p>.