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

Question

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

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

这会影响组件:

import React from 'react';

const Test = (props) => <div id="MyDiv">


    <div>

        <div id="one">
            THIS IS ONE
        </div>


        {

            props.list.map((data, i) => {

                return <div id="oneb" key={i}>
                   THIS IS ONEB
                </div>

            })

        }


    </div>
</div>

这里发生的情况是 id="one"的 div 将隐藏，但 id="oneb"仍会显示。

为什么会发生这种情况？我该如何解决这个问题？

Answer 1

你没有以 React 的方式来做这件事。要以 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