使用React render不返回任何內容

-1

我已經在React組件中渲染。如果條件滿足，我想做點什麼，在這種情況下，當鼠標懸停在圖標上時顯示一條消息，否則我不希望它做任何事情。使用React render不返回任何內容

我嘗試了if條件，但它不起作用。這是我的代碼：

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

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

，但我得到了以下錯誤：

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我知道，我返回的東西，沒有按」存在，如果text.length == 0，但有什麼辦法，使工作，像如果條件不符合，不要返回任何東西？

來源

2017-06-20 Samurai Jack

的可能的複製[如果速記內聲明，如果聲明】（https://stackoverflow.com/questions/42686424/if-statement-within-shorthand-if-statement） –

@ ShubhamKhatri非常好的答案。你有錯字：如果統計:) –

@VedranMaricevic，謝謝，修正了錯字:) –

在render()函數的return內不能有if。在return內只能進行三元和短路操作。

在返回之前最好執行儘可能多的邏輯。

試試這個：

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

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

來源

2017-06-20 08:38:51 Chris

我想你可以有，如果以及回報。 –

@VedranMaricevic，不，這是不可能的。 – Chris

對不起，但它是:) –

不必返回組件。試試這個代碼：

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

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

來源

2017-06-20 08:38:56

將不會完全工作，如果條件不匹配，您將收到錯誤什麼都不會返回，'return null'是條件不匹配。然而，它的一個重複問題 –

當然，應該返回空值。但是這個答案是基於OP問題的。 –

正確，但如果您發佈的是答案，請確保它完全可以正常工作。你可以編輯你的答案。同時檢查編輯的重複問題 –

其簡單的檢查條件和返回部件或空

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


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

來源

2017-06-20 08:39:20

你在正確的道路上。只是一個小錯誤。你應該調節它像這樣：

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

}

來源

2017-06-20 08:41:23 ickyrr

在渲染，你需要返回一個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

來源

2017-06-20 08:46:13 glennreyes

這裏是工作示例。

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>

來源

2017-06-20 08:47:33 loelsonk

使用React render不返回任何內容

回答

相關問題