哎，算了。直接上代码吧，不懂得私聊我把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有条件的渲染</title>
<script src="./bower_components/react/react.production.min.js"></script>
<script src="bower_components/react/react-dom.production.min.js"></script>
<script src="bower_components/babel/browser.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script type="text/babel">
function Info(props) {
if(!props.open){
return null
}
return (
<p>{props.text}</p>
)
}
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {text: "",resultText:"",open:false};
}
changeText(event) {
this.setState({text: event.target.value})
}
changeStatus() {
this.setState({open: true})
if (!this.state.text) {
this.setState({
resultText:"您还未登录"
})
} else if (this.state.text == "123456") {
this.setState({
resultText:"您好，您已登录"
}
)
} else {
this.setState({
resultText:"不好意思，密码错误"
})
}
}
render(){
return (
<div>
<input placeholad="请输入您的密码" type="text" value={this.state.text} onChange={e => this.changeText(e)}/>
<button onClick={this.changeStatus.bind(this)} >点击登录</button>
<Info text={this.state.resultText} open={this.state.open}></Info>
</div>
)
}
}
ReactDOM.render(
<Login/>,
document.getElementById("test")
)
</script>
</html>