Javascript 使用React render不返回任何内容

我在React组件中进行了渲染。如果条件满足，我想做一些事情，在本例中，当鼠标悬停在图标上时显示消息，否则我不希望它做任何事情

我尝试了if条件，但不起作用。这是我的代码：

render() {
    const text= this.checkSomething();

    return (
    {
       if (text.length > 0) {
            <ActionBar>
                <div>
                    <Icon type="..."/>
                     //do something here
                </div>
        </ActionBar>
    }
}

但我得到了以下错误：

必须返回有效的React元素或null。你可能有 返回未定义、数组或其他无效对象

我知道如果text.length==0，我会返回一些不存在的东西，但是有没有办法让它工作，比如如果不满足条件，就不返回任何东西？

渲染函数的返回中不能有if。只有三元和短路操作才能在回路内工作

最好在返回之前执行同样多的逻辑

请尝试以下方法：

render() {
    const text= this.checkSomething();

    if(!text.length) return null;
    return (
      <ActionBar>
        <div>
          <Icon type="..."/>
          //do something here
        </div>
      </ActionBar>
    );
  }
}

---

您没有返回组件。请尝试以下代码：

render()
{
    const text = this.checkSomething();

    if (text.length > 0) {
        return ( <ActionBar>
            <div>
                <Icon type="..."/>
                //do something here
            </div>
        </ActionBar> )
    } else {
        return null;
    }
}

---

它可以简单地检查条件和返回组件，或者只检查null

render() {
const text= this.checkSomething();


   if (text.length > 0) {
       return <ActionBar>
            <div>
                <Icon type="..."/>
            </div>
    </ActionBar>
   }else{
      return null
   }
}

---

你在正确的道路上。只是一个小错误。你应该这样来调节它：

render() {

  const text= this.checkSomething();

  if (text.length > 0) {
    return (
      <div>
        // do something
      </div>
    );
  }
  // if condition is not met
  return (
    <div>
      <h1>please wait while data is loading..</h1>
    </div>
  );

}

---

在render中，您需要返回React.Element或null，因此最短路径可能如下所示：

  render() {
    const text = this.checkSomething();

    return (
      text.length > 0 ? (
        <ActionBar>
          <div>
            <Icon type="..."/>
            //do something here
          </div>
        </ActionBar>
      ) : null
    ); 
  }

---

请在此处阅读更多信息：

以下是工作示例

类应用程序扩展了React.Component{ 构造{ //... } 一些文字{ 返回“123213”； } 渲染{ 回来 {this.sometext.length>0？：null} ; } } const ActionBar==> 超级的 ReactDOM.render , document.getElementById'root' ;

---

您可以将其包装在函数中，然后在返回中调用自身

---

可能是@ShubhamKhatri的副本非常好的答案。你有输入错误：if声明：@VedranMaricevic，谢谢，修正了输入错误：我想你也可以在里面输入if。@VedranMaricevic，不，这是不可能的。对不起，但它是：@VedranMaricevic，你能给我看一把小提琴或是它的工作演示吗？请检查第一篇评论中的链接。仍然不能完全工作，如果条件不匹配，您将得到一个错误，因为不会返回任何内容，返回null表示条件不匹配。但是，它是一个重复的questionNull，当然应该返回。但这个答案是基于OP问题。正确，但如果你发布了一个答案，请确保它完全有效。你可以编辑你的答案。同时检查已编辑的重复问题。非常感谢。

return (
    <div>
      {(() => {
        if (catSay == "maow") return <p>meow</p>;
      })()}
    </div>
  );