使用上下文和提供程序发送参数以使其起作用

Question

我目前正在学习React Context Api，并且正在计划在我的项目中实现它，但是我不知道如何向我的提供者操作发送参数。

我的提供程序有一个动作，该动作必须接收一个参数（一个道具），该参数必须通过组件的onNameChange动作发送。

非常感谢您的帮助！

代码如下：

提供商

import React, { Component } from 'react'
const RadioContext = React.createContext()

class RadioProvider extends Component {
  state = {
    show: 'block',
    hide: 'none',
  }



  handleShow = data => {
      console.log(data)
  }


  render() {
    const { children } = this.props

    return (
      <RadioContext.Provider
        value={{
          state: this.state,
          actions: {
            onNameChange: this.handleShow,
          },
        }}
      >
        {children}
      </RadioContext.Provider>
    )
  }
}

export {RadioProvider, RadioContext as default}

以及在我的组件中：

import RadioContext from '../../services/testAudio';


export default class Content extends React.Component {

    render() {

        return (

            <RadioContext.Consumer>{
                value => {
                    const { state, actions } = value
                    return (
                        <div>
                            <div className='icon'>
                                <div onClick={value.actions.onNameChange}  >
                                    <FaPlay />
                                </div>
                                <div onClick={value.actions.onNameChange} >
                                    <FaPauseCircle />
                                </div>
                            </div>
                        </div>
                    )
                }
            }</RadioContext.Consumer>
        )
    }
}