https://create-react-app.dev/docs/getting-started
npx create-react-app my-app
JSX使用表达式嵌入
function App() {const count = 100;function getSelfName() {return "SelfName"}return (<div>Hello World!<div>{'This is Javascript message~!'}</div><div>{count}</div><div>{getSelfName()}</div><div>{new Date().getDate()}</div><div style={{color: "red"}}>This red Div</div></div>);
}export default App;
实现列表渲染
import React from 'react';const data = [{id: 1, name: 'Alice', sex: 'Female', phone: '123-456-7890'},{id: 2, name: 'Bob', sex: 'Male', phone: '987-654-3210'},{id: 3, name: 'Charlie', sex: 'Male', phone: '555-123-4567'}
];function App() {return (<div><ul>{data.map(user => (<li key={user.id}><div>ID: {user.id}</div><div>Name: {user.name}</div><div>Sex: {user.sex}</div><div>Phone: {user.phone}</div></li>))}</ul></div>);
}export default App;
根据条件渲染对应界面
function App() {const loggedIn = true;return (<div><div>{loggedIn ? (<h1>Welcome User!</h1>) : (<button onClick={() => alert('log in')}>Log In</button>)}</div><div>{loggedIn && <h2>Welcome User h2</h2>}</div></div>);
}
使用函数渲染复杂对应界面
import React from 'react';function ComponentA() {return <h1>This is Component A</h1>;
}function ComponentB() {return <h1>This is Component B</h1>;
}function App() {const condition = true; // 设置条件,可以根据需要修改const renderComponent = () => {if (condition) {return <ComponentA />;} else {return <ComponentB />;}};return (<div>{renderComponent()}</div>);
}export default App;
当在React中为按钮添加事件时,你可以使用onClick
属性来指定一个函数,在按钮被点击时触发该函数。以下是一些使用React为按钮添加事件的常见示例:
1. 基本用法:
import React from 'react';class MyComponent extends React.Component {handleClick() {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;
2. 传递参数:
import React from 'react';class MyComponent extends React.Component {handleClick(param) {console.log('Button clicked with param:', param);}render() {return (<button onClick={() => this.handleClick('Hello')}>Click me</button>);}
}export default MyComponent;
3. 使用箭头函数:
import React from 'react';class MyComponent extends React.Component {handleClick = () => {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;
4. 使用Hooks:
import React, { useCallback } from 'react';const MyComponent = () => {const handleClick = useCallback(() => {console.log('Button clicked!');}, []);return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;
5. 使用函数组件:
import React from 'react';const MyComponent = () => {const handleClick = () => {console.log('Button clicked!');};return (<button onClick={handleClick}>Click me</button>);
};export default MyComponent;
6. 事件对象:
import React from 'react';class MyComponent extends React.Component {handleClick(event) {console.log('Button clicked!');console.log('Event object:', event);}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;
7. 阻止默认行为:
import React from 'react';class MyComponent extends React.Component {handleClick(event) {event.preventDefault();console.log('Default behavior prevented!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}export default MyComponent;
8. 事件对象和自定义参数:
import React from 'react';class MyComponent extends React.Component {handleClick = (event, customParam) => {event.preventDefault(); // 阻止默认行为console.log('Button clicked!');console.log('Custom parameter:', customParam);console.log('Event object:', event);}render() {const customParam = 'Hello'; // 自定义参数return (<button onClick={(event) => this.handleClick(event, customParam)}>Click me</button>);}
}export default MyComponent;