数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时装设计
法律React.js 内的 Context api
React context api 在 16.3 或更新版本中安全生产使用。添加 context api 的原因是为了避免在有多个子组件时传递道具。
如果不使用 context api，那么我们必须通过所有中间组件来传递道具。另一种备选解决方案是使用诸如 Redux 的第三方库来维护中央存储。
理解传递道具的问题
App.js → props for books → BookList.js → 再次将 books 传递为道具 → Book.js
随着子组件数量的增加，传递道具的链条也随之增加。
使用 context api，react 提供提供者使用者方法来解决此问题。
Creating the context: BaseContext.js import React from 'react'; // this is the same to the createStore method of Redux const BaseContext = React.createContext(); export default BaseContext;
创建提供者
import BaseContext from './BaseContext';
class BookProvider extends Component {
state = {
books: {
book1: { name: 'React', price: 500 },
book2: { name: 'Angular', price: 450 }
}
};
render() {
return (
<BaseContext.Provider
value={{
books: this.state.books,
incrementPrice: selectedID => {
const books = Object.assign({}, this.state.books);
books[selectedID].price =books[selectedID].price + 1;
this.setState({
books
});
},
decrementPrice: selectedID => {
const books = Object.assign({}, this.state.books);
books[selectedID].price =books[selectedID].price - 1;
this.setState({
books
});
}
}}
>
{this.props.children}
</BaseContext.Provider>
);
}
}App.js
class App extends Component {
render() {
return (
<BookProvider>
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to my book store</h1>
</header>
<ProductBookList />
</div>
</BookProvider>
);
}
}在子组件中，我们可以使用使用者 −
const Books = () => (
<BaseContext.Consumer>
{context => (
<Fragment>
<h4>Books:</h4>
{Object.keys(context.books).map(bookID => (
<Car
key={bookID}
name={context.books[bookID].name}
price={context.books[bookID].price}
incrementPrice={() =>context.incrementPrice(bookID)}
decrementPrice={() =>context.decrementPrice(bookID)}
/>
))}
</Fragment>
)}
</BaseContext.Consumer>
);使用 context api 我们可以避免在 React 子组件中传递道具。
更新于： 2019 年 9 月4 日
810 次查看
廣告