レンダリング2のdivを1つにして隠すようにして、リアクションに表示する

Question

私はコーディングの世界では新しいですし、私のリアクションコードに問題があります。

私のコードには検索バーがあります。私は検索ボタンをクリックして、テキストを入力するテキスト領域を表示し、最初のボタン（検索）を表示するためにXを押すとします。私は最初に2つのレンダリング（renderOpenとrenderNormal）とgetInitialStateを使用して動作します！しかし、今私はそれをすべて1つのレンダリングにして表示したい。コードは特筆すべきは良いですが、 2オブジェクトを表示していて、すべてを1つのオブジェクトに表示したいと思います。 ありがとうございます！

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 

 

 
var Button = React.createClass({ 
 

 
getInitialState: function() { 
 
    return {search:false} 
 
}, 
 

 
close: function(){ 
 
    this.setState({search:false}) 
 
    console.log('test1'); 
 
}, 
 

 
open: function(){ 
 
    this.setState({search:true}) 
 
    console.log('test2'); 
 
}, 
 

 
renderNormal: function(){ 
 
return(
 
<div className="mainDiv"> 
 
    <div className="search-close"> 
 
     <img src="search2.png" className="search-button" alt="" onClick={this.open}/> 
 
     <layer onClick={this.open} className="layer"> 
 
     <span className="defaultText">Search 
 
     </span> 
 
     </layer> 
 
     </div> 
 

 
    <div className="search-open"> 
 
     <span className="layer2"> 
 
     </span> 
 
     <input type="image" src="search2.png" className="search-button2"/> 
 
     <input type="text" placeholder="&nbsp;Search" className="text-area"/> 
 
     <span className="close-area" onClick={this.close}>x 
 
     </span> 
 
     </div> 
 
      </div> 
 
    ) 
 
}, 
 

 

 
render: function() { 
 
    if(this.state.search) { 
 
    return this.renderNormal(
 
     this.props.search-close); 
 
     }else { 
 
    return this.renderNormal(
 
     this.props.search-open); 
 
     } 
 
    } 
 
}); 
 

 

 
const element = <div> 
 
        <Button/> 
 
       </div>; 
 
ReactDOM.render(
 
       element, 
 
       document.getElementById('root') 
 
);

Answer 1

あなたはこのように、renderNormalがちょうど1 2のを返したい：努力のビットで

renderNormal: function(){ 
if(this.state.search) { 
    return(
     <div className="mainDiv"> 
      <div className="search-open"> 

       <span className="layer2"> 
       </span> 
       <input type="image" src="search2.png" className="search-button2"/> 
       <input type="text" placeholder="&nbsp;Search" className="text-area"/> 
       <span className="close-area" onClick={this.close}>x 
       </span> 
      </div> 
     /div>)   
} 
else { 
    return (
     <div className="mainDiv"> 
      <div className="search-close"> 
        .... 
      </div> 
     /div>)   
} 
} 

あなたはmainDivコンテナが、キーの繰り返しを避けることができここでの教訓は、renderメソッドが純粋なJavascriptであり、その内部にifステートメントを使用できることです。 HTMLのように見えるJSXコードは実際にはJavascriptオブジェクトを作成するための特殊な構文です... ReactのトップレベルでHTMLのようにDOMを操作するために使用されます。 （まあまあではありませんが、かなり近いです）