我希望不显示任何元素。所以我在React元素中使用内联样式进行显示:无。然后,在setTimeout运行之后,显示将转到一个空字符串,以便显示我的内容。但是我的显示始终是一个空字符串。状态不会传递给内联样式,因此永远不会分配值none。如何将状态传递给内联样式?
我尝试了style={{display:`${this.state.hidden}`}}
和style={{display: this.state.hidden}}
class Home extends Component{
state={
hidden: 'none'
}
showHello=()=>{
this.setState({
hidden: ''
})
}
showName=()=>{
this.setState({
hidden: ''
})
}
showFullStack=()=>{
this.setState({
hidden: ''
})
}
componentDidMount(){
setTimeout(()=>this.showHello(), 2500);
setTimeout(() => this.showName(), 20000);
setTimeout(() => this.showFullStack(), 10000);
}
render(){
return(
<div className='home-div'>
<h2 className='hello-header' style={{display:`${this.state.hidden}`}}>Hello, I'm</h2>
<h2 className='name-header' style={{display:`${this.state.hidden}`}}>Sean</h2>
<h2 className='full-stack-header' style={{display: this.state.hidden}}>I'm a Full Stack Web Developer.</h2>
<a className='resume'>Download my resume here!</a>
<a className='github'>View my GitHub here!</a>
<h1 className='arrow'>⇩</h1>
</div>
感谢您的帮助,我对React还是有些陌生,因此,如果这是新手的错误,请原谅我。
谢谢!
最佳答案
如果您想有条件地显示项目,我将使用一个数组并检查该值。
See it live!
const displayMap = {
false: 'none',
true: 'block'
}
class Home extends Component {
state = {
display: []
}
showMessage = (name) => {
this.setState({
display: [...this.state.display, name]
})
}
componentDidMount(){
setTimeout(()=> this.showMessage('hello'), 2500);
setTimeout(() => this.showMessage('name'), 20000);
setTimeout(() => this.showMessage('full-stack'), 10000);
}
render(){
const { display } = this.state
return(
<div className='home-div'>
<h2 className='hello-header' style={{display: displayMap[display.indexOf('hello') >= 0]}}>Hello, I'm</h2>
<h2 className='name-header' style={{display: displayMap[display.indexOf('name') >= 0]}}>Sean</h2>
<h2 className='full-stack-header' style={{display: displayMap[display.indexOf('full-stack') >= 0]}}>I'm a Full Stack Web Developer.</h2>
<a className='resume'>Download my resume here!</a>
<a className='github'>View my GitHub here!</a>
<h1 className='arrow'>⇩</h1>
</div>
)
}
}