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

Question

我正在尝试将子组件的状态传递给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;

Answer 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;