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 = (