显示或隐藏React中的元素

我第一次摆弄React.js，找不到一种方法通过单击事件在页面上显示或隐藏一些东西。我没有加载任何其他库到页面，所以我正在寻找一些使用React库的本地方式。这是我目前得到的。我想在点击事件触发时显示结果div。

var Search= React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    }
});

React.renderComponent(<Search /> , document.body);

当前回答

React Hooks的简单隐藏/显示示例:(抱歉没有小提琴)

const Example = () => {

  const [show, setShow] = useState(false);

  return (
    <div>
      <p>Show state: {show}</p>
      {show ? (
        <p>You can see me!</p>
      ) : null}
      <button onClick={() => setShow(!show)}>
    </div>
  );

};

export default Example;

2020-01-15 18:53:11

其他回答

在状态中设置一个布尔值(例如:'show)'，然后执行:

var style = {};
if (!this.state.show) {
  style.display = 'none'
}

return <div style={style}>...</div>

2014-07-01 05:30:24

下面是三元操作符的另一种语法:

{ this.state.showMyComponent ? <MyComponent /> : null }

等价于:

{ this.state.showMyComponent && <MyComponent /> }

学习的原因

还有显示的替代语法:'none';

<MyComponent style={this.state.showMyComponent ? {} : { display: 'none' }} />

然而，如果你过度使用display: 'none'，这将导致DOM污染，并最终降低应用程序的速度。

2016-09-08 22:52:35

//use ternary condition

{ this.state.yourState ? <MyComponent /> : null } 

{ this.state.yourState && <MyComponent /> }

{ this.state.yourState == 'string' ? <MyComponent /> : ''}

{ this.state.yourState == 'string' && <MyComponent /> }

//Normal condition

if(this.state.yourState){
 return <MyComponent />
}else{
  return null;
}


<button onClick={()=>this.setState({yourState: !this.props.yourState}>Toggle View</button>

2019-12-10 10:18:46

一个使用Hooks在React中显示/隐藏元素的简单方法

const [showText, setShowText] = useState(false);

现在，让我们为渲染方法添加一些逻辑:

{showText && <div>This text will show!</div>}

And

onClick={() => setShowText(!showText)}

好工作。

2020-02-06 15:56:30

根据文档，最佳实践如下:

{this.state.showFooter && <Footer />}

只有在状态有效时才呈现元素。

2017-05-05 15:04:18

显示或隐藏React中的元素

推荐文章

最新文章

标签