Reactレンダリングを使用して何も返しません。

Question

Reactコンポーネントでレンダリングしました。条件が満たされた場合、私は何かをしたい、この場合はアイコンの上にマウスを移動するとメッセージを表示するが、それ以外の場合は何もしたくない。

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場合に存在「doesnの何かを返すことを知っているが、それを動作させるためにどのような方法がある、などの条件が満たされていない場合は何も返しませんか？

Answer 1

render()機能のreturnにはifを含めることはできません。 returnの内部では、3進および短絡動作のみが動作します。

返す前に多くのロジックを実行するのが最善です。

代わりにこれを試してください：あなたはコンポーネントを返却していない

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

とあなたは正しい道にあるコンポーネントまたは単にヌル

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


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

Answer 4

を返します。このコードを試してみてください。ちょっとした間違い。あなたがそうのようにそれを調整する必要がありますレンダリング

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 5

で、あなたは最短の方法は次のようになることができるように、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 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>