react

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>
		)
	}
}