P14:React进阶-单项数据流和其他框架配合使用

React的特性中有一个概念叫做 “单项数据流”，可能刚刚接触React的小伙伴不太明白这个概念，还是拿出《服务菜单》的 Demo，来给大家讲解。比如我们在父组件中可以直接把this.state.list传递过来。

例如下面代码:

    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }

其实这样传是没有问题的，问题是你只能使用这个值，而不能修改这个值，如果你修改了，比如我们把代码写成这样：

handleClick(){
    //关键代码——---------start
    this.props.list=[]
    //关键代码-----------end
    this.props.deleteItem(this.props.index)
}

就会报下面的错误；

TypeError: Cannot assign to read only property 'list' of object '#'

意思就是 list 是只读的，单项数据流。

那如果要改变这里边的值怎么办? 其实上篇《父子组件传值》已经讲过了，就是通过传递父组件的方法。

.input {border:3px solid #ae7000}

import React from 'react'
import ReactDOM from 'react-dom'
import App from './Beauty'
ReactDOM.render(,document.getElementById('root'))

import React,{Component,Fragment } from 'react'
import XiaojiejieItem from './XiaojiejieItem'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                
                 增加服务 
            
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                        )
                    })
                }
            
        
    )
}

    inputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        this.setState({
            inputValue:e.target.value
        })
    }
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty

import './style.css'

import React, { Component } from 'react'; //imrc
class XiaojiejieItem extends Component { //cc
   //--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }
   //--------------主要代码--------end
    render() { 
        return ( 
            {__html:this.props.content}}
            
        );
    }
    handleClick(){
        console.log(this.props.index)
        this.props.deleteItem(this.props.index)
    }
}

export default XiaojiejieItem;

有小伙伴问我，React 和 jquery 能一起使用吗？

答案： 是可以的，React其实可以模块化和组件化开发。 看 /public/index.html文件，代码如下：

DOCTYPE html>

  
    
    
    
    

    

    React App
  
  
    You need to enable JavaScript to run this app.
    
    
     
  

其实React只对这一个

今天过的好开心，服务很满意！