相关疑难解决方法(0)

在继续之前，我应该提到是的，我已经阅读了关于“在 React JSX 中使用 if 语句”及其在 SO 和其他地方的不同变体的问题和答案。

然而，这些帖子更多的是关于如何在不使用 JSX 中的语句的情况下绕过。我想知道为什么JSX 中不允许使用语句，对此我找不到任何帖子。

我正在阅读关于这个名为“ If-Else in JSX ”的官方文档，给出的原因是，引用，

JSX 只是函数调用和对象构造的语法糖

他们继续对比以下两段代码，其中第一段有效，第二段无效：

这是有效的：

// This JSX: 
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);
// Is transformed to this JS: 
ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode); 

这是无效的：

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

我真的很想在幕后了解这一点。首先，在第二个示例中，我从未想过在idHTML 元素的属性中编写 JavaScript 。事实上，这是我第一次看到 id 属性中使用的任何类型的代码。如果我要尝试编写一个 if …

我有一个这样的模板：

const Template = ({ data }) => {
  const { id } = data.Page
  const postNode = data.Page

  return (
    <Layout>
       // conditional logic here
       // if {id} is 40 output <AdditionalContent />
    </Layout>
  )
}

我想知道是否可以检查id它是否为40，然后输出<AdditionalContent>组件。

我的状态是{visibilityFilter: "completed"}或{visibilityFilter: "todo"}。基于此，我想为一个元素分配类名。像这样

<span {this.state.visibilityFilter=="completed"?className="active":className:""}>Completed</span>

但这不起作用。我尝试了各种变化

{<span this.state.visibilityFilter=="completed"?className="active":className:"">Completed</span>}

但是他们都没有工作。我知道，如果我在return语句外创建变量并将其分配为HTML，则它可以工作。像这样，

let classCompleted = this.state.visibilityFilter == "completed"? "active":"";

然后，

<span className={`$(classCompleted)`}></span>

但是我想知道如何在return语句中评估类。