9.自定义组件间的传值
//引入全局参数import imageUrl from '../../images/winter.jpg';//自定义图片参数方法const user = {name: 'Hedy Lamarr',imageSize: 90,};//写入图片方法function Image() {return (<div><p>{user.name}</p><img src={imageUrl} alt={'Photo of ' + user.name}style={{width: user.imageSize,height: user.imageSize}}/></div>)}//页面自定义组件上的名称function MyButton() {return (<button>I'm a button</button>);}export default class Fourzerofour extends Component {render() {return (<div>//书写到页面的样式<MyButton/>//引入图片<Image/></div>)}}
10.if..else..判断
var concat = {data:1}//if..else..判断function Ifelse(){if(concat.data<0){concat.data = concat.data+1}else{concat.data = concat.data-1}return(<div>{concat.data}</div>)}或者--------------------function Ifelse(){return(<div>{concat.data>0?concat.data = concat.data+1:concat.data = concat.data-1}</div>)}
11.for循环(嵌套map使用)
var arr = [{ title: 'Cabbage', id: 1, isfine:1 },{ title: 'Garlic', id: 2, isfine:0 },{ title: 'Apple', id: 3, isfine:1 }];function For(){return(<div>{arr.map((item,index)=>{return(<div key={index} style={{color:item.isfine == 1?'red':'green'}}>{item.id}{item.title}</div>)})}</div>)}
12.点击事件(Onclick)
function MyButton() {function ClickButton() {alert('Button clicked!');}return (<button onClick={ClickButton}>I'm a button</button>);}
13.页面上事件实事传递参数
//先引入方法import { useState } from 'react';function Transmit(){// 事件 方法 const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return(<button onClick={handleClick}>你点击了我{count}次</button>)}
14.关于export default function App()与export function App()的区别
export default不需要{} import Gallery from './Gallery.js';
export function需要{} import {Gallery} from './Gallery.js';