显示或隐藏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中隐藏和显示元素是非常简单的。

有很多种方法，但我只展示两种。

方式1:

const [isVisible, setVisible] = useState(false)

let onHideShowClick = () =>{
    setVisible(!isVisible)
}

return (<div> 
        <Button onClick={onHideShowClick} >Hide/Show</Button>
         {(isVisible) ? <p>Hello World</p> : ""}
</div>)

方式2:

const [isVisible, setVisible] = useState(false)

let onHideShowClick = () =>{
    setVisible(!isVisible)
}

return (<div> 
        <Button onClick={onHideShowClick} >Hide/Show</Button>
        <p style={{display: (isVisible) ? 'block' : 'none'}}>Hello World</p>
</div>)

它就像if和else一样工作。

在方法一中，它将删除并重新渲染Dom中的元素。在第二种方式中，你只是将元素显示为false或true。

谢谢你！

2022-10-26 11:36:34

其他回答

在最新的react 0.11版本中，你也可以只返回null，不呈现任何内容。

渲染为空

2014-07-18 16:54:11

<style type="text/css">
    .hidden { display:none; }
</style>

const Example = props => 
  <div className={props.shouldHide? 'hidden' : undefined}>Hello</div>

2014-07-05 21:11:24

在某些情况下，高阶分量可能有用:

创建高阶组件:

export var HidableComponent = (ComposedComponent) => class extends React.Component {
    render() {
        if ((this.props.shouldHide!=null && this.props.shouldHide()) || this.props.hidden)
            return null;
        return <ComposedComponent {...this.props}  />;
    }
};

扩展你自己的组件:

export const MyComp= HidableComponent(MyCompBasic);

然后你可以这样使用它:

<MyComp hidden={true} ... />
<MyComp shouldHide={this.props.useSomeFunctionHere} ... />

这减少了一点样板文件，并强制坚持命名约定，但请注意，MyComp仍然会被实例化-省略的方法是前面提到的:

{ ！hidden &&; <MyComp ... /> }

2016-11-13 08:57:45

使用rc-if-else模块

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class App extends React.Component {
    render() {
        return (
            <If condition={this.props.showResult}>
                Some Results
            </If>
        );
    }
}

2019-02-27 11:19:09

我创建了一个小组件来处理这个问题:react-toggle-display

它根据隐藏或显示道具将样式属性设置为display: none !important。

使用示例:

var ToggleDisplay = require('react-toggle-display');

var Search = React.createClass({
    getInitialState: function() {
        return { showResults: false };
    },
    onClick: function() {
        this.setState({ showResults: true });
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                <ToggleDisplay show={this.state.showResults}>
                    <Results />
                </ToggleDisplay>
            </div>
        );
    }
});

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

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

2015-07-04 03:59:40

显示或隐藏React中的元素

推荐文章

最新文章

标签