ReactJS条件呈现不工作

我有一个输入，每当用户在框中单击时，我想看看输入是否大于1

  updateQuery(e) {
   this.setState({ query: e.target.value });

   const optionValue = e.target.value.length;

  }

然后，我想在渲染/返回中执行以下操作：

render() {
const { query } = this.state;

return (
  <div>
    {optionValue > 1 ? (
      <div className="loading">
        ) : (
      <div className="not-loading">
    )}
      <NewSearch query={query} updateQuery={this.updateQuery} />
    </div>
    <Debounce ms={1000}>
      <BusInfo query={query} />
    </Debounce>
  </div>
);
 }

render（）{
const{query}=this.state；
返回(
{optionValue>1(
) : (
)}
);
}

但我明白这个问题：

第48:6行：解析错误：意外标记

我的应用程序无法运行

我错过了什么

我读过这个文件：

---

救命啊

不要像react组件那样定义html标记

改变这个

   {optionValue > 1 ? (
      <div className="loading">True condition</div>
        ) : (
      <div className="not-loading">False condition</div>
    )}

{optionValue>1(
真实状况
) : (
虚假条件
)}

您的开始和结束标记不匹配，您有一个不匹配的结束

如果有条件地呈现的div没有任何内容，这很好，但它们确实需要自动关闭：

（注意关闭的

/>

）

现在应该可以正常工作了（尽管您可能需要执行

This.optionValue

）

updateQuery（e）{
this.setState（{query:e.target.value}）；
this.optionValue=e.target.value.length；
}
render（）{
const{query}=this.state；
返回(
{this.optionValue>1(
) : (
)}
);
}

根据

optionValue

的某个值，您似乎只需要更改div的

className

因此，您可以这样做：

返回(
1？“正在加载”：“未加载”}>
);

另外，

optionValue

是

updateQuery

的常量，以后在

渲染时无法访问。您还应在您的州添加
optionValue
：

updateQuery（e）{
这个.setState（{
查询：e.target.value，
选项值：e.target.value.length
});
}

稍后在渲染时：

const{query，optionValue}=this.state；

或者只需检查render
query.length
，而不是在您的状态中为此保留一个新值


如果您想在这两种情况下共享类，您可以使用来实现这一点：

1？“正在加载“：“未加载”}`}>
Hi Aron，这很有道理。我使用了提供的代码，现在我得到了：第23:11行：“optionValue”被分配了一个值，但从未使用过没有未使用的变量第31:10行：“optionValue”没有定义是的，这是因为如果你想在渲染方法中使用
optionValue
，你需要使它可用，它不能从另一个函数中神奇地找到它。将其作为
this.optionValue=e.target.value.length放置在组件上，并像
this.optionValue感谢Aron提供的答案和帮助：）我想除了其他人在答案中提到的要点之外，您可以简单地执行此操作，因为您只需有条件地更改类名即可：1？“正在加载”：“未加载”>。。。除了第一个错误外，
optionValue
也会出现错误，因为无法在
渲染中访问它。此值也应该是您状态的一部分。检查我下面的答案，在这里我分析了这两个问题。米哈利斯，谢谢你，这太完美了，我还有一个问题要问。因此，类名称与条件匹配。我需要在中添加一些其他类，但不是在像内容一样的条件纯普通css类中-如何做到这一点？谢谢：）更新了我最后一部分的答案：）谢谢好心的先生，这很完美，事实上，从您的代码片段中，我刚刚巩固了我的react知识，非常丰富。谢谢，现在条件对我来说更清楚了。有时候，我觉得这些文档有点让人困惑！干杯：）
updateQuery(e) {
 this.setState({ query: e.target.value });

  this.optionValue = e.target.value.length;
}

render() {
  const { query } = this.state;

  return (
    <div>
      <div>
        {this.optionValue > 1 ? (
          <div className="loading" />
        ) : (
            <div className="not-loading" />
          )}
        <NewSearch query={query} updateQuery={this.updateQuery} />
      </div>
      <Debounce ms={1000}>
        <BusInfo query={query} />
      </Debounce>
    </div>
  );
}