通过反应上下文 api 将子状态传递给父组件
pass a childs state through react context api to parent component
我正在尝试将子组件的状态传递给 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;
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;
我正在尝试将子组件的状态传递给 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;
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;