Javascript ReactJSContextAPI

我无法在ReactJs的子ComponentGuest.js中呈现父ComponentApp.js中的状态。 我不确定第11行{this.props.children}是否应该存在

App.js

Guest.js

---

必须在App.js中呈现来宾组件，才能呈现子组件。 内联编号11您正在尝试在呈现此应用的应用组件的子组件中呈现。 例如：

render(){
  return(
    <App>
      <div>hello</div>
    </App>
  )
}

解决方案：

import React, { Component } from 'react';
import Guest from './Guest';
export const MyContext = React.createContext();

export default class App extends Component {
  state = {
   name: "Rahul",
    age: "29"
  }
  render() {
    return (
      <MyContext.Provider value={this.state.name}>
        <Guest/>
      </MyContext.Provider>
    )
  }
}

---

要使状态变量在来宾组件中可用，来宾组件需要是ContextProvider的子级。由于应用程序的逻辑会随着时间的推移变得复杂，因此最好创建一个单独的提供者组件，将来宾组件作为子组件呈现

比如说,

提供者组件

export const MyContext=React.createContext； 类名称提供程序扩展组件{ 状态={ 姓名：Rahul， 年龄:29 }; 渲染{ 回来 {this.props.children} ; } } 来宾组件

类来宾扩展组件{ 渲染{ 回来 来宾组件 {value=>{value} ; } } 应用程序组件

导出默认类应用程序扩展组件{ 渲染{ 回来 ; } }

---

Codesandbox演示

您可以将Guest作为应用程序的子级渲染到DOM

我不确定第11行{this.props.children}是否应该存在

你可能看不到上面的其他答案。

---

来宾组件将作为this.props.children提供给应用程序组件。请参见

解决此问题有两种方法 1.创建全局状态管理 2.在类内部用作上下文

我正在使用全局状态管理 看看这个

Context.js

Guest.js

App.js

---

render不是一个函数，它不是完整的代码，我只是在一个组件中编写了一个render方法。我的意思是，这个渲染方法中的div是App的子对象。在应用程序组件中呈现this.props.children时，将显示hello文本

render(){
  return(
    <App>
      <div>hello</div>
    </App>
  )
}

import React, { Component } from 'react';
import Guest from './Guest';
export const MyContext = React.createContext();

export default class App extends Component {
  state = {
   name: "Rahul",
    age: "29"
  }
  render() {
    return (
      <MyContext.Provider value={this.state.name}>
        <Guest/>
      </MyContext.Provider>
    )
  }
}

ReactDOM.render(<App><Guest /></App>, document.getElementById('app'))

    import React, { Component } from "react";

const MyContext = React.createContext();

export default class Context extends Component {
    state = {
        name: "Krsnadil",
        value: 10,
        onClick: this.value + 1
    }
    render() {
        return (
            <MyContext.Provider value={this.state}>
                {this.props.children}
            </MyContext.Provider>
        );
    }
}
export const Consumer = MyContext.Consumer;

import React, { Component } from 'react'
import { Consumer } from "./Context";

class Guest extends Component {
  render() {
    return (
      <Consumer>
        {value => value.name}
      </Consumer>
    );
  }
}
export default Guest;

import React, { Component } from 'react';
import Guest from "./Guest";
import Context from "./Context";

export default class App extends Component {
  render() {
    return (
      <Context>
        <Guest />
      </Context>
    )
  }
}