在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中逆向传输的目的。