轮播图父组件：

import React,{ Component } from "react";
import Swiper from "./swiper";
// 引用子组件轮播
import AddContact from "./addContact";
class App extends Component{
 state={
   swiperIndex:1,  
   listPic:[
     'https://img0.baidu.com/it/u=2614555822,2668128081&fm=26&fmt=auto',
     'https://img2.baidu.com/it/u=4134693183,87150378&fm=15&fmt=auto',
     'https://img1.baidu.com/it/u=3757299288,3537520756&fm=26&fmt=auto'
 ]
 };
 addSubmit=(sub)=>{
   console.log(sub,'父组件接收子组件传值');
 }

 render(){
   return (
     <div className="App">
       <header className="App-header">
         <p>这是测试</p>
       </header>
       <Swiper listPic={this.state.listPic} activeIndex={this.state.swiperIndex}/>
       {/* 使用子组件轮播进行props值传递，父组件传值 */}
       <AddContact addSubmit={this.addSubmit}/>
     </div>
   );
 }

}

export default App;

轮播图子组件创建：

      
    // 这是容器组件
    import React,{Component} from 'react';  
    import './style/swiper.css'
 
    class Swiper extends  Component{
        state={
            name:'simba',
            list:this.props.listPic,
            // 接受父组件传值
            activeIndex:this.props.activeIndex,
             // 接受父组件传值
            timer:null
            // 时间控制器
          }
          handleSwpier(row,index){
             clearInterval(this.state.timer)
            //  暂停时间控制器
              console.log(row)
            this.setState({
                activeIndex:index
            })
            this.actionSwiper()
            // 开启时间控制
          }
          actionSwiper(){
           let timer = setInterval(()=>{
              console.log(this.state.list.length-1,this.state.activeIndex)
              if(this.state.activeIndex>= this.state.list.length-1){
                this.setState({
                  activeIndex:0
                })
              }else{
                this.setState({
                  activeIndex:this.state.activeIndex+1
                })
              } 
             
              
            },3000)
            this.setState({
              timer
            })
          }
          componentDidMount(){
           this.actionSwiper()
          //  挂载时开启时间控制
          }
        render(){

            return(
                <div className="swiper">
                {
                     this.state.list.map((item,index)=>{
                         return <img key={index} className={this.state.activeIndex===index?'action':''} src={this.state.list[this.state.activeIndex]}></img>
                     }) 
                }
                  <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}
                             onClick={this.handleSwpier.bind(this,item,index)} className={this.state.activeIndex==index?'active':''}></li>
                        })
                    }
                    {/* 这里可以直接通过bind函数绑定this，this默认第一位指向当前Component组件 */}
                  </ul>
                </div>
            )
        }
    }

    export default Swiper;
    // 导出组件

如何在render中使用方法获取内部this值

bind(this)可在render函数内绑定当前this指向，如不绑定不会指向当前Component函数内部也无法改变state内部值(也在在函数内部用箭头函数获取Component当前this指向)

子组件如何传值给父组件

this.props.handleChange(val):handleChange为当前子组件传给父组件的函数名，val为当前需要传给父组件接收的值
子组件通过this.props传值给父组件

父组件传值给子组件

直接在子组件上定义想要的名称例如：activeIndex='1',子组件接收只需要通过this.props.activeIndex即可获取当前父组件的传值