组件传值&数据请求

作者: 奶瓶SAMA | 来源:发表于2018-06-12 21:10 被阅读0次

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

组件传值可以分为以下三类

父组件向子组件传递数据
子组件向父组件传递数据
非父子组件之间的数据传递

父传子 – 简化版

函数式组件传值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root" class="parent">
            
        </div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个函数组件  ---- 使用props完成值得接收
    function Child(props){
        return (
            <div>
                <ul>
                    <li>{props.name}</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        )
    }


    ReactDOM.render(
        // 渲染组件  并通过name属性完成传值
        <Child name="3"></Child>, 
        document.getElementById('root') 
    );

</script>

类组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个类组件
    class Child extends React.Component{
        render(){
            return (
                <div>
                    <ul>
                        <li>{this.props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }
    }


    ReactDOM.render(
        <Child name="1"></Child>, 
        document.getElementById('root') 
    );

</script>

父传子 – 完整版

函数式组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<!--
    
    组件：组成的部件,可以接受任何props输入,并返回元素
    
-->
<script type="text/babel">

    // 创建一个父组件 
    function Parent(){
        return (
            <div>
                <h1>这是父组件</h1>
                {/*在父组件中嵌套子组件*/}
                <Child name="1"></Child>
            </div>
        )
    }
    
    // 创建一个子组件 列表
    function Child(props){
        return (
            <div>
                <h3>这是子组件</h3>
                <ul>
                    <li>{props.name}</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        )
    }

    // 2. 组件的使用
    ReactDOM.render(
        <Parent></Parent>, 
        document.getElementById('root') 
    );

</script>

类组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

        
    </body>

</html>
<script type="text/babel">

    // 创建一个类组件  -- 父
    class Parent extends React.Component{
        render(){
            return (
                <div>
                    <h1>这是父组件</h1>
                    {/*在父组件中嵌套子组件*/}
                    <Child name="1"></Child>
                </div>
            )
        }
    }

    
    // 创建一个类组件  -- 子
    class Child extends React.Component{
        render(){
            return (
                <div>
                    <h3>这是子组件</h3>
                    <ul>
                        <li>{this.props.name}</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            )
        }
    }
    


    ReactDOM.render(
        <Parent></Parent>, 
        document.getElementById('root') 
    );

</script>

子传父

函数式组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    function Child(props){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                     子组件：<input onChange={props.handleEmail}/>
                </div>
           )
    }
    
    //父组件
    function Parent() {
        
        return (
            <div>
                <div id='div'>父组件：{1}</div>
                <Child name="email" handleEmail={
                    function (event){
                        /*获取子组件的数据*/
                        console.log(event.target.value)
                        
                        document.getElementById('div') = event.target.value
                        
                    }
                }/>
            </div>
        )
    }
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

类组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
    </body>

</html>
<script type="text/babel">

    //子组件
    class Child extends React.Component{

        render(){
            return (
                <div>
                    {/*当文本框内容发生变化的时候.会执行父组件里面的事件*/}
                     子组件：<input onChange={this.props.handleEmail}/>
                </div>
            )
        }
    }
    
    //父组件
    class Parent extends React.Component{

        constructor(props){
            super(props)
            this.state = {
                email:''
            }
        }
        handleEmail(event){
            this.setState({email: event.target.value});
        }
        
        
        
        render(){
            return (
                <div>
                    <div>父组件：{this.state.email}</div>
                    <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
                </div>
            )
        }
    }
    
    ReactDOM.render(
      <Parent />,
      document.getElementById('root')
    );

</script>

非父子

非父子组件传值之兄弟组件传值

使用中间人模式 , 定义一个公共的父组件来实现兄弟组件之间的数据传递

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        

    </body>

</html>
<script type="text/babel">
    
    
    class Brother1 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      render(){
        return (
          <div>
            <button onClick={this.props.refresh}>
                更新兄弟组件
            </button>
          </div>
        )
      }
    }
    
    class Brother2 extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      render(){
        return (
          <div>
             {this.props.text || "兄弟组件未更新"}
          </div>
        )
      }
    }
    
    class Parent extends React.Component{
      constructor(props){
        super(props);
        this.state = {}
      }
      
      refresh(){
        return (e)=>{
          this.setState({
            text: "兄弟组件沟通成功",
          })
        }
      }
      
      render(){
        return (
          <div>
            <h2>兄弟组件沟通</h2>
            <Brother1 refresh={this.refresh()}/>
            <Brother2 text={this.state.text}/>
          </div>
        )
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('root'));

</script>

组件的嵌套

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>

    <body>
        <div id="root"></div>
        
        
    </body>

</html>
<!--
    
    组件：组成的部件,可以接受任何props输入,并返回元素
    
-->
<script type="text/babel">

    // 1.1 创建一个基本的组件
    function Welcome(props){
        return (
            <div>
                <p>{props.name}</p>
            </div>
        )
    }
    
    
    // 1.2 创建一个app组件,并使用Welcome组件
    function App(props){
        return (
            <div>
                <Welcome name="1"></Welcome>
                <Welcome name="2"></Welcome>
                <Welcome name="3"></Welcome>
            </div>
        )
    }

    var element = <App></App>
    // 2. 组件的使用
    ReactDOM.render(
        element, 
        document.getElementById('root') 
    );

</script>

props总结

props是只读的

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

get请求

数据请求

静态数据

最初的时候, 渲染页面 , 数据都是写在本页面

这样操作的问题是修改页面内容不方便, 只能通过操作本页面完成

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    

    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[
                    {"id":"123001","name":"xiaoming"},
                    {"id":"123002","name":"xiaobing"},
                    {"id":"123003","name":"xiaona"}
                ]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

请求json文件,完成页面的渲染

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    

    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
            var url = "data.json"
            
            var option = {
                methods:"get"
            }
            
            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res)
                
                // 修改state
                this.setState({
                    arr:res
                })
                
                // 打印输出 
                console.log(this.state.arr)
                
            })
            
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

在线接口

书写数据接口, 通过后台操作, 读取数据库数据, 并做成接口的形式, 我们需要对数据进行操作的时候,直接操作接口即可

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    
    [{"id":"123001","name":"xiaoming"},{"id":"123002","name":"xiaobing"},{"id":"123003","name":"xiaona"}]
    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
            var url = "http://www.taoquan.store/robot/getUsers.php"
            
            var option = {
                methods:"get"
            }
            
            fetch(url,option).then((res)=>{
                return res.json()
            }).then((res)=>{
                // 请求到的数据
                console.log(res.users)
                
                // 修改state
                this.setState({
                    arr:res.users
                })
                
                // 打印输出 
                console.log(this.state.arr)
                
            })
            
        }
        
    }

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

文件上传

Content-Type：上传文件的时候，一定要设置为application/x-www-form-urlencoded

跨域

fetch跨域概述

在fetch的配置中有 mode选项 , 提供了跨域的能力

mode: ‘cors’, // no-cors, cors, *same-origin
mode:’cors’
- 这个选项提供了跨域的能力, 但是服务端必须支持 cors ,也就是设置 res.header(“Access-Control-Allow-Origin”, “*”);
mode:’no-cors’
- 可以跨域进行数据请求 , 不需要设置跨域 header
- 在该模式下得到的返回数据中 type为opaque。, 能够在控制台看到返回的数据, 但是没有权限使用这些数据
mode:”same-origin”
- 同源, 不允许跨域

并不能成功跨域进行数据的访问

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <!--react的与dom相关的一些功能-->
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        
        <!--数据请求-->
        <script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.min.js"></script>
    </head>

    <body>
        <div id="root"></div>

    </body>

</html>
<script type="text/babel">
    
    
    class Fetch_get extends React.Component{
        
        constructor(props){
            super(props)
            this.state = {
                arr:[]
            }
        }
        
        render(){
            return (
                <div>
                    <ul>
                        {
                            this.state.arr.map((ele,index,arr)=>{
                                return <li key={index}>{ele.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
        }
        
        componentDidMount(){
            
             var url = "https://api.douban.com/v2/movie/top250"
            // var url = 'http://127.0.0.1:8899/api/selectData'
            var option = {
                methods:"get",
                mode:'no-cors'
            }
            
            fetch(url,option).then((res)=>{
                console.log(res)
            })
            
        }
        
    }
    
    
    

    ReactDOM.render(
        <Fetch_get></Fetch_get>, 
        document.getElementById('root') 
    );

</script>

关于跨域的三种方式

第一种方式

利用script标签的跨域访问特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
</body>

</html>
<!--代码的先后顺序 不能变-->
<script type="text/javascript">
    function fn(response){
            console.log(response);
    }
</script>
<script src="https://api.douban.com/v2/movie/top250?callback=fn"></script>

第二种方式

动态创建script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP实现跨域2</title>
</head>
<body>
</body>

</html>
<!--代码的先后顺序 不能变-->
<script type="text/javascript">
    function fn(response){
            console.log(response);
    }
    
    var script = document.createElement('script')
    
    script.src = 'https://api.douban.com/v2/movie/top250?callback=fn'
    
    document.body.insertBefore(script, document.body.firstChild);   
    
</script>

第三种方式

使用jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    
    
    $.ajax({
        type:'get',
        url:"https://api.douban.com/v2/movie/top250?callback=?",
        success(res){
            console.log(res)
        },
        dataType:"jsonp"
    })
    
    
</script>

组件传值&数据请求

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

父传子 – 简化版

父传子 – 完整版

函数式组件

子传父

函数式组件

非父子

props总结

get请求

数据请求

文件上传

跨域

fetch跨域概述

关于跨域的三种方式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

组件传值&数据请求

每个组件 的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现

父传子 – 简化版

父传子 – 完整版

函数式组件

子传父

函数式组件

非父子

props总结

get请求

数据请求

文件上传

跨域

fetch跨域概述

关于跨域的三种方式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

每个组件的作用域都是独立的, 有时候需要在组件之间完成数据的传递,需要通过组件传值的方式来实现