react中的逆向传输流实例讲解

在react中提供的props只能进行单向传输流，但是在某些情况下，我们必须要从子组件发送信息到父组件，因此，我们可以进行函数来进行触发，从而达到逆向传输流。举个栗子~~~

class DemoOne extends React.Component {  
    handleVote(productId) {  
        const nextProducts = this.state.products.map((product) => {  
            if (product.id === productId) {  
                return Object.assign({}, product, {  
                    votes: product.votes + 1  
                })  
            } else {  
                return product;  
            }  
        });  
        this.setState({  
            products: nextProducts  
        })  
    }  
  
    render() {  
        return (  
            <p className="DemoOne">  
                <Product  
                    onVote={this.handleProductUpVote}  
                />  
            </p>  
        )  
    }  
}  

在上面的例子中，是一个投票系统，即，当点击的时候，如果点击的是和id相同，则将票数+1。接下来，我们来制作按钮，我将按钮放在子组件，这是一个逆向传输的经典例子。

class Product extends React.Component {  
    handleUpVote() {  
        this.props.onVote(this.props.id);  
    }  
    render() {  
        return (  
            <button onClick={this.handleUpVote}>  
                +1  
            </button>  
        )  
    }  
}  

在子组件中，通过在子组件中定义一个函数handleUpVote，而里面的内容，则是通过props来触发父组件的函数。注意:在这里，我是用新的函数间接的来触发父组件的函数，这时，我们在子组件中点击之后，父组件就会收到子组件发送的消息，实现数据跟新，从而达到react中逆向传输的目的。