react - 隐藏/显示 DOM - 使用反应库答案

【问题标题】：react - hide/show DOM - using react libraryreact - 隐藏/显示 DOM - 使用反应库
【发布时间】：2019-12-02 03:21:12
【问题描述】：

我第一次遇到 React.js 的问题，找不到通过点击在页面上显示或隐藏某些内容的方法。

我没有将任何其他库加载到页面中，因此我正在寻找使用 React 库的本地方式。这就是我到目前为止所拥有的。我想在点击事件触发时显示结果 div。

任何帮助表示赞赏

var Detail = 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 DataRes = React.createClass({
    render: function () {
        return (
            <div id="data" className="search-results">
                Some Data
            </div>
        );
    }
});

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

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以试试下面的代码：

在此示例中，您可以尝试单击按钮并显示组件，然后再次单击它会隐藏，基本上是它的切换，

希望这对你有用。

var Detail = React.createClass({
    getInitialState: function() {
        return { show: false };
    },
    onClick: function() {
        this.setState({ show: !this.state.show }); // Here is the toggle
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.show ? <DataRes /> : null } // basically this line will show your datas component view when you click on view
            </div>
        );
    }
});

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

ReactDOM.render( <Detail /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!--Your component will be render. -->
</div>

【讨论】：