我在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"仍会显示。
为什么会发生这种情况?我该如何解决这个问题?
最佳答案
你没有以 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
关于javascript - React Component div id 不会隐藏 map 循环中使用的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54768511/