prpos 父子组件数据传递
//props.js
//rcc
import React, { Component } from 'react'
export default class PropsDemo extends Component {
render() {
return (
<div>
{this.props.title}
</div>
)
}
}
//rfc
import React from 'react'
export default function PropsDemo(e) {
return (
<div>
{e.title}
</div>
)
}
//rfc 解构
import React from 'react'
export default function PropsDemo({e}) {
return (
<div>
{title}
</div>
)
}
//App.js
import PropsDemo from './PropsDemo'
<PropsDemo title="react"/>
if else
import React, { Component } from 'react'
export default class ConditionLoop extends Component {
constructor(props) {
//class 形式需要super
super(props)
this.state = {
showTitle : false
}
}
render() {
return (
<div>
<h1>if for </h1>
{this.state.showTitle ? <h1>{this.props.title}</h1>:<h1>none</h1>}
</div>
)
}
}
for
import React, { Component } from 'react'
export default class ConditionLoop extends Component {
constructor(props) {
super(props)
this.state = {
goods: [
{
title: 'java',
prince: 19
},
{
title: 'python',
prince: 21
},
{
title: 'c',
prince: 22
},
{
title: 'c++',
prince: 23
}
]
}
}
render() {
return (
<div>
<h1>if for </h1>
<ul>
{this.state.goods.map(item => {
return (
<li key={item.title}>
<span>课程名称:{item.title}</span>
<span>价格{item.prince}</span>
</li>
)
})}
</ul>
</div>
)
}
}