diff --git a/docs/react.md b/docs/react.md index ee8953a..b3c49ea 100644 --- a/docs/react.md +++ b/docs/react.md @@ -301,7 +301,7 @@ const Student = () => ( ) ``` -从 @v16.2.0 开始,`Fragment` 可用于返回多个子节点,而无需向 DOM 添加额外的包装节点。 +从 `v16.2.0` 开始 `Fragment` 可用于返回多个子节点,而无需向 DOM 添加额外的包装节点。或者使用 `<>` 效果是一样的。 ### Portals @@ -318,6 +318,69 @@ render() { 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 +### Refs 转发 + +```jsx +const FancyButton = React.forwardRef( + (props, ref) => ( + + ) +); +``` + +#### 使用 + +```jsx +// 你可以直接获取 DOM button 的 ref: +const ref = React.createRef(); + + + 点击我 +; +``` + +### Class 组件内部使用 ref 属性 + +```jsx +import { Component,createRef } from 'react'; + +class MyComponent extends Component { + constructor(props) { + super(props); + this.myRef = createRef(); + } + + render() { + return
; + } +} +``` + +提示:Refs 适用于类组件,但不适用于函数组件(除非您使用 useRef hook,请参阅[hooks](#hooks)) + +### 函数组件内部使用 ref 属性 + +```jsx +function CustomTextInput(props) { + // 这里必须声明 $input,这样 ref 才可以引用它 + const $input = useRef(null); + function handleClick() { + $input.current.focus(); + } + return ( +
+ + +
+ ); +} +``` + 默认值 --- @@ -444,6 +507,7 @@ let emptyHeading =

; const root = ReactDOM.createRoot( document.getElementById('root') ); + const element =

Hello, world

; root.render(element); ``` @@ -453,9 +517,8 @@ root.render(element); ### JSX 属性 ```jsx -const element = ( - -); +const avatarUrl = "img/picture.jpg" +const element = ; const element = (