props
一层一层的传递，app组件通过props一层一层的往下传给ProfileHeader组件，期间通过了Profile组件，但Profile组件并不需要props。
代码语言：javascript复制import React, { Component } from 'react';
function ProfileHeader(props) {
return (
<div>
<h2>用户昵称: {props.nickname}</h2>
<h2>用户等级: {props.level}</h2>
</div>
)
}
function Profile(props) {
return (
<div>
{/* <ProfileHeader nickname={props.nickname} level={props.level}/> */}
<ProfileHeader {...props} />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
nickname: "context类组件",
level: 99
}
}
render() {
return (
<div>
{/* <Profile nickname={this.state.nickname} level={this.state.level} /> */}
<Profile {...this.state} />
</div>
)
}
}Context-类组件
代码语言：javascript复制import React, { Component } from 'react';
class ProfileHeader extends Component {
render() {
// console.log(this.context);
return (
<div>
<h2>用户昵称: {this.context.nickname}</h2>
<h2>用户等级: {this.context.level}</h2>
</div>
)
}
}
// 创建Context对象
const MainContext = React.createContext({
nickname: "createContext的默认值",
level: -1,
})
/*
要使用contextType，必须要用类组件
如果ProfileHeader在React.createContext里面，则使用它的value值；
如果ProfileHeader不在React.createContext里面，则会使用React.createContext的默认值
*/
ProfileHeader.contextType = MainContext;
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
nickname: "context类组件",
level: 99
}
}
render() {
return (
<div>
<MainContext.Provider value={this.state}>
<Profile />
</MainContext.Provider>
{/* <Profile /> */}
</div>
)
}
}Context-函数组件
代码语言：javascript复制import React, { Component } from 'react';
// 创建Context对象
const MainContext = React.createContext({
nickname: "createContext的默认值",
level: -1
})
function ProfileHeader() {
return (
<MainContext.Consumer>
{
value => {
return (
<div>
<h2>用户昵称: {value.nickname}</h2>
<h2>用户等级: {value.level}</h2>
</div>
)
}
}
</MainContext.Consumer>
)
}
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
nickname: "context函数组件",
level: 99
}
}
render() {
return (
<div>
<MainContext.Provider value={this.state}>
<Profile />
</MainContext.Provider>
</div>
)
}
}多个Context-类组件
代码语言：javascript复制import React, { Component } from 'react';
// 创建Context对象
const MainContext = React.createContext({
nickname: "aaaa",
level: -1,
})
const ThemeContext = React.createContext({
color: "red",
})
class ProfileHeader extends Component {
// jsx -> 嵌套的方式
render() {
return (
<MainContext.Consumer>
{
value => {
return (
<ThemeContext.Consumer>
{
theme => {
return (
<div>
<h2>用户昵称: {value.nickname}</h2>
<h2>用户等级: {value.level}</h2>
<h2 style={{ color: theme.color }}>颜色: {theme.color}</h2>
</div>
)
}
}
</ThemeContext.Consumer>
)
}
}
</MainContext.Consumer>
)
}
}
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
nickname: "kobe",
level: 99
}
}
render() {
return (
<div>
<MainContext.Provider value={this.state}>
<ThemeContext.Provider value={{ color: "red" }}>
<Profile />
</ThemeContext.Provider>
</MainContext.Provider>
</div>
)
}
}多个Context-函数组件
代码语言：javascript复制import React, { Component } from 'react';
// 创建Context对象
const MainContext = React.createContext({
nickname: "aaaa",
level: -1,
})
const ThemeContext = React.createContext({
color: "red",
})
function ProfileHeader() {
// jsx -> 嵌套的方式
return (
<MainContext.Consumer>
{
value => {
return (
<ThemeContext.Consumer>
{
theme => {
return (
<div>
<h2>用户昵称: {value.nickname}</h2>
<h2>用户等级: {value.level}</h2>
<h2 style={{ color: theme.color }}>颜色: {theme.color}</h2>
</div>
)
}
}
</ThemeContext.Consumer>
)
}
}
</MainContext.Consumer>
)
}
function Profile() {
return (
<div>
<ProfileHeader />
<ul>
<li>设置1</li>
<li>设置2</li>
<li>设置3</li>
<li>设置4</li>
</ul>
</div>
)
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
nickname: "kobe",
level: 99
}
}
render() {
return (
<div>
<MainContext.Provider value={this.state}>
<ThemeContext.Provider value={{ color: "red" }}>
<Profile />
</ThemeContext.Provider>
</MainContext.Provider>
</div>
)
}
}属性展开
如果你已经有了一个 props 对象，你可以使用展开运算符 ... 来在 JSX 中传递整个 props 对象。以下两个组件是等价的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
