Question

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

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

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

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

但是我收到以下错误：

必须返回有效的React元素（或null）。你可能有返回undefined，数组或其他一些无效对象。

我知道如果text.length == 0，我会返回一些不存在的东西，但是有什么方法可以让它起作用，比如如果条件不满足则不返回任何内容吗？

Answer 1

if功能的return内不能有render()。只有三元和短路操作才能在return内完成。

在返回之前执行尽可能多的逻辑是最好的。

请改为尝试：

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

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

Answer 2

您没有返回组件。试试这段代码：

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

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

Answer 3

在渲染中，您需要返回React.Element或null，因此最短的方式可能是：

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

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

在此处详细了解：https://facebook.github.io/react/docs/react-dom.html#render

Answer 4

它简单检查条件和返回组件或只是null

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


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

Answer 5

你走在正确的道路上。只是一个小错误。你应该这样做：

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>
  );

}

Answer 6

这是工作示例。

class App extends React.Component {
  construct() {
    //...
  }
  
  sometext() {
   return '123213';
  }
  
  render() {
    return(
      <div>
     {(this.sometext().length > 0) ? <ActionBar /> : null}
     </div>
    );
  }
  
}

const ActionBar = () => (
  <div>Super</div>
)

  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="root"></div>

Answer 7

您可以将其包装在函数中，然后在return中进行调用。

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

使用React渲染不返回任何内容

7 个答案: