react条件渲染
<body>
<div id="root"></div>
</body>
<script type="text/babel">
// if else 条件渲染
let isLoading = false
function Content(){
if(isLoading){
return (<h2>正在加载...</h2>)
}else{
return (<h2>加载完成</h2>)
}
}
function Content2(){
let text = (<h2>正在加载...</h2>)
if(!isLoading){
text = (<h2>加载完成</h2>)
}
return (<div>{text}</div>)
}
// 三元运算符,参与布局中的脚本设置
function Content3(){
return (<div className="content3">
{isLoading ? (<h2>正在加载...</h2>):(<h2>加载完成</h2>)}
</div>)
}
// 逻辑与，参与布局中的脚本设置
function Content4(){
return (<div className="content3">
{isLoading && (<h2>正在加载...</h2>)}
</div>)
}
let root = document.querySelector('#root')
ReactDOM.createRoot(root).render(<Content4 />)
</script>
react列表渲染
<body>
<div id="root"></div>
</body>
<script type="text/babel">
const students = [
{id:1, name:'张三'},
{id:2, name:'李四'},
{id:3, name:'王五'}
]
// 将数组渲染至列表中
function List(){
return (
<ul>
{/*students.map(item => <li key={item.id}>{item.name}</li>)*/}
{students.map((item,index) => <li key={index}>{item.name}</li>)}
</ul>
)
}
let root = document.querySelector('#root')
ReactDOM.createRoot(root).render(<List />)
</script>
react受控组件
<body>
<div id="root"></div>
</body>
<script type="text/babel">
class App extends React.Component{
// 受控组件
//1、将state的值显示到 React元素中
//2、React元素中内容变化，让state中值也要变化
state = {
content:'123'
}
handleChange(ev){
// console.log(ev.target.value)
// setState 立即提交 但this.state 获取数据时，不是立即的。
this.setState({
content:ev.target.value
})
}
render(){
return (
<div>
<input type="text" value={this.state.content} onChange={this.handleChange.bind(this)} />
</div>
)
}
}
let root = document.querySelector('#root')
ReactDOM.createRoot(root).render(<App />)
</script>
react生命周期
//创建时
constructor()
componentDidMount()
render()
//更新时
componentDidUpdate()
render()
//卸载时
componentWillUnmount()
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
