huzidaha / react-naive-book

开源、免费、专业、简单的 React.js 在线教程
http://huziketang.com/books/react
3.77k stars 523 forks source link

‘’context‘’ needs update 需要更新 #24

Open matwming opened 6 years ago

matwming commented 6 years ago

Hello,everyone:

Lesson 29关于context的用法,最新的16.4.1版本react已经不使用this.context了,但是还是支持老的用法,后续版本就不会再支持this.context了。

最新的方法详见:https://reactjs.org/docs/context.html

举个例子: 比如component结构如下,App包含Child1,Child1包含Child2,Child2包含Child3. 现在需要把App里面传一个值red(注意是red不是blue)到Child3里面的button里面去:

1.首先在App里面要 export const ButtonColor=React.createContext(‘blue') 来创建这个context, blue是一个默认值,如果咱们没有写provider的话,默认就把blue传给 child component了,但是一般咱们都会写provider,所以blue在这里可写可不写,其实不写挺好的,省事。 2.在App render里面的return用 `

` 把Child1包裹住,此时说明了ButtonColor.Provider是一个provider了,提供的东西是red,这里打算把red传给child1 component以及他的child component,所以child 3也能接收这个value。 3.在Child3这个component里面首先要先 `import {ButtonColor} from App.js`, 然后用ButtonColor.Consumer包裹某个东西,这个东西必须是一个function,或者用箭头函数写更好. ` {value=>( )} ` 这样就成功的把red 从app里面传到了child3的button里面了.当然咱们如果想要传个function什么都行,反正就是能隔着好几个component传东西,不过context肯定是不能替换redux的,毕竟功能太单一了。 如果有写错的地方,希望大神们指出来,欢迎大家指出来,共同进步,谢谢。 Regards Ming