Передать дочернее состояние через 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

Реагирующий контекстный API предназначен для передачи данных от родителя к потомку. Так что вам придется использовать специальную опору. В вашем App.js вызовите 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;