react中组件的复用

最新推荐文章于 2022-05-06 17:06:23 发布

dong.wang

最新推荐文章于 2022-05-06 17:06:23 发布

阅读量683

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/wangdong9395/article/details/109115809

版权

react 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1. 组件复用的两种方式

1.1 render props模式
1.2 高阶组件（HOC）

2. 组件复用到底复用的是什么？

2.1 复用state
2.2 操作state的方法

3. render-props的使用步骤

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
    // 复用的组件
      class Mouse extends React.Component {
        state = {
          x: '',
          y: '',
        }
        componentDidMount() {
          window.addEventListener('mousemove', (e) => {
            this.setState({
              x: e.pageX,
              y: e.pageY
            })
          }) 
        }
        render() {
          return this.props.render(this.state)
        }
      }

      class App extends React.Component {
        render() {
          return (
            <div>
              <Mouse render = {(mouse) => {
                return (
                  <div>鼠标的坐标(x: {mouse.x}, y: {mouse.y})</div>
                )
              }}/>
            </div>
          )
        }
      }
      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>

</html>

注意点：
在这里插入图片描述

dong.wang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react中组件的复用

1. 组件复用的两种方式1.1 render props模式 1.2 高阶组件（HOC）2. 组件复用到底复用的是什么？2.1 复用state2.2 操作state的方法3. render-props的使用步骤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
复制链接

扫一扫