1234567
const Hello = (props)=>{ return <div> Hello,{props.name} </div>}export default Hello;
import Hello from './components/hello/Hello'const Page = ()=>{ return <Hello name={"world"}/>} export default Page;
123456789
import React, { useState } from 'react';import Hello from '../Hello/Hello';const Page = ()=>{ const [count,setCount] = useState(0); return <Hello setCount={setCount} count={count}/>}export default Page;
const Hello = (props) => { return <div onClick={() => { props.setCount(props.count + 1) } }>Hello,count is{props.count} </div>}export default Hello;
123456789101112131415
import React, { useState } from 'react';function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}
1234567891011121314151617181920
import React, { useState, useEffect } from 'react';function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );}