Open MJingv opened 3 years ago
React.createElement(component, props, ...children)
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>
//compiles into
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
动态
组件传入)
import React from 'react';
import { PhotoStory, VideoStory } from './stories';
const components = { photo: PhotoStory, video: VideoStory };
function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return
### children 展示
- string(html)
- jsx
- function children
### others
- Booleans, Null, Undefined 忽略
- 0 会展示
```js
list.length&&<div/>//❌
list.length>0&&<div/>//✅
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
setState()
function
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
https://reactjs.org/docs/react-component.html https://programmingwithmosh.com/javascript/react-lifecycle-methods/ https://imweb.io/topic/5b8cacaa7cd95ea863193572
https://zh-hans.reactjs.org/docs/uncontrolled-components.html
React实践中的问题合集
Q1:如何在map中正确绑定事件(this)
https://www.freecodecamp.org/news/the-best-way-to-bind-event-handlers-in-react-282db2cf1530/
https://reactjs.org/docs/faq-functions.html
执行
时确定this
): 缺点: rerender定义
时确定this
): 避免在render中使用箭头函数list.map(i=><div onClick={()=>console.log(xx)}/>) //⛔️ will re-render
Q2:react中的 this
https://zhuanlan.zhihu.com/p/37911534
严格模式