Question

我在index.html文件中有此代码，该文件随应用程序一起加载：

这会影响组件：

$(window).on('load', () => {
    $('#one').hide();
    $('#oneb').hide();
});

这里发生的是id =“ one”的div会隐藏，但是id =“ oneb”的div仍会显示。

为什么会这样？我该如何解决？

Answer 1

您不是以React方式进行操作。为此，您的组件应保持并操纵某种状态。检查以下示例：

import React from 'react';
class MyAwesomeComponent React.Component {
    constructor(){
        this.state = {
            hide: false
        }
    }
    render(){
        const {hide} = this.state;

        <React.Fragment>
            {
                hide
                ? null
                : <div>This is my awesome div that I need to show or hide ;)</div>
            }
            <button>{hide ? 'Show': 'Hide'}</button>
        </React.Fragment>
    }
}
export default MyAwesomeComponent;

上面的代码将隐藏或显示您的div。检查React documentation

React Component div ID不会隐藏map循环中使用的内容

1 个答案: