通过反应上下文 api 将子状态传递给父组件

Posted 2023-04-14

【中文标题】通过反应上下文 api 将子状态传递给父组件

【英文标题】：pass a childs state through react context api to parent component

【发布时间】：2019-01-07 18:22:23

【问题描述】：

我正在尝试将子组件的状态传递给App.js 文件。 为此，我想使用新的上下文 API。

但是我读过这不起作用，因为如果值动态变化，提供者必须是消费者的父级。

在我的情况下，我不需要动态更改它，我只想将状态传递给消费者。子组件的状态不会改变，所以以后不改变也没问题。

这是否可以将状态从BlogPost.js 传递到App.js？如果有使用上下文 API 的替代方法，也可以。

我的代码：

App.js：

import BlogPost from './containers/BlogPost/BlogPost';

import  MediaContext  from './containers/BlogPost/BlogPost.js'

class App extends Component 

  render() 


      return (
          <div>
              <BlogPost />
              <MediaContext.Consumer>
                value => 
              console.log(value)
          </MediaContext.Consumer>
      </div>
    );
  


export default App

BlogPost.js： 该组件的状态应该被传递。如果我在React.createContext('hello') 中定义上下文，它就可以工作。但我不能在那里定义状态。

export const MediaContext = React.createContext();

class BlogPost extends Component 
    state = 
        title: "title",
        image: 
            src: "link",
            alt: "alt,
            credits: "Unsplash",
        ,
        text: "Text Text Text",
        media: 
            type: 'music',
            audiosrc: 'audiosrc',
            coversrc: 'coversrc',
            artist: 'artist',
            title: 'Songtitle',
            started: false
        ,
    

    render() 
        return (
            <article>
                <MediaContext.Provider value=this.state>
                </MediaContext.Provider>
            </article>
        );
    



export default BlogPost;

【问题讨论】：

您可以使用自定义道具将数据传递给父组件。例如，在 App.js 中调用 <BlogPost onPropChange=functionInParent()/> 之类的组件，然后从 BlogPost 中调用 this.props.onPropChange(data_to_be_passed)。我不明白您的 BlogPost 组件在 App.js 中的位置。如果你能澄清一下，我可以给你一个明确的解决方案。

对不起，我删除了太多... BlogPost 组件（目前）直接在 App.js 中使用。在我的问题中的 App.js 下也添加了 BlogPost。

【参考方案1】：

React 上下文 API 旨在将数据从父级传递给子级。因此，您将不得不使用自定义道具。在您的 App.js 中，使用 prop 调用 BlogPost 并调用它将触发 handleData 函数。

import BlogPost from './containers/BlogPost/BlogPost';

class App extends Component 

handleData = (value) => 
  console.log(value)
 

render() 


  return (
      <div>
          <BlogPost customProp=this.handleData/>
    </div>
   );
  
 
export default App

然后在你的 blogpost.js 中，只要你想传递数据，就调用 customProp 函数。如果您想在组件挂载后立即传递数据，请在 componentDidMount 生命周期或任何其他生命周期方法中调用它，具体取决于您想要传递数据的时间。

class BlogPost extends Component 
 constructor(props) 
 super(props);
 this.state = 
    title: "title",
    image: 
        src: "link",
        alt: "alt,
        credits: "Unsplash"
            ,
    text: "Text Text Text",
    media: 
       type: 'music',
       audiosrc: 'audiosrc',
       coversrc: 'coversrc',
       artist: 'artist',
       title: 'Songtitle',
       started: false
           
   
  

componentDidMount()
this.props.customProp(this.state);


render() 
    return (
        <article/>
    );




 export default BlogPost;