Question

我是编码世界的新手，我的React代码存在问题。

我的代码是一个搜索栏。我希望当我点击搜索按钮以显示文本区域以放置一些文本时，当我按下X以显示第一个按钮（搜索）时。我第一次使用带有2个渲染的getInitialState（renderOpen和renderNormal）并且正常工作！但现在我想在一个渲染中制作它并显示它。代码很好，但正在展示 2对象，我想在一个对象中显示所有对象。感谢!!!

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只返回两者中的一个，如下所示：

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的顶层将使用它来操作DOM，就像HTML一样。（嗯，不太好，但非常接近。）

将2个div渲染为一个并使其隐藏并显示在React中

1 个答案: