[英]React sending data to parent component
I load paginated messages in a subcomponent
from an API and send the jsonData
to the parent component
to handle displaying the messages to the UI. 我从API中加载
subcomponent
分页消息,并将jsonData
发送到父component
以处理向UI显示消息。 I successfully achieved this with the below code but I was told my design and data passing was questionable --- Specifically in my MoreMessages
component. 我用下面的代码成功实现了这个,但我被告知我的设计和数据传递是有问题的 - 特别是在我的
MoreMessages
组件中。
Anyone see what is questionable about my attempt? 有人看到我的尝试有什么问题吗?
MoreMessages.js MoreMessages.js
/* In the subcomponent I simply render a button, when it is clicked I fetch the messages and send the data to the parent component using self.props.setMessages(jsonData)
*/ / *在子组件中,我只是渲染一个按钮,当它被单击时,我获取消息并使用
self.props.setMessages(jsonData)
* /将数据发送到父组件
export default class MoreMessages extends React.Component {
constructor() {
super()
this.state = {
pages: 1
}
}
handleClick() {
var self = this
this.setState({ pages: this.state.pages+1 }, () => {
var url = process.env.URL+'?page='+this.state.pages
const fetchMessages = fetch(url, {credentials: 'same-origin'})
function loadMyMessages(data) {
data.json().then((jsonData) => {
console.log("Sending the jsonData to props in Layout component");
self.props.setMessages(jsonData)
})
}
fetchMessages.then(loadMyMessages)
});
}
render() {
return (
<div id="more-messages">
<button onClick={this.handleClick.bind(this)}>More Messages</button>
</div>
)
}
}
Layout.js Layout.js
/* Then simply the data gets passed to the parent component using the setMessages method, which updates the messages state, and the MessageList component updates the UI */ / *然后只需使用setMessages方法将数据传递给父组件,该方法更新消息状态,MessageList组件更新UI * /
export default class Layout extends React.Component {
constructor() {
super()
this.state = {
messages: []
}
}
componentWillMount() {
var self = this
const fetchMessages = fetch(process.env.URL, {credentials: 'same-origin'})
function loadMyMessages(data) {
data.json().then((jsonData) => {
self.setMessages(jsonData)
})
}
fetchMessages.then(loadMyMessages)
}
setMessages(data) {
var messageArr = []
data.messages.map((r) => {
messageArr.push(r)
})
this.setState({
messages: this.state.messages.concat(messageArr),
})
}
render() {
return (
<div id="componentLayout">
<MessageList messages={this.state.messages}/>
<MoreMessages setMessages={this.setMessages.bind(this)} />
</div>
)
}
}
Is anything wrong or not recommended with this design? 这个设计有什么不对或不推荐吗?
In your Layout
component do this: 在
Layout
组件中执行以下操作:
export default class Layout extends React.Component {
constructor(props) {
super(props)
// ...
this.setMessages = this.setMessages.bind(this);
this.handleLoadMore = this.handleLoadMore.bind(this);
}
// ...
handleLoadMore() {
// your call to retrieve more data
}
render() {
return (
<div id="componentLayout">
<MessageList messages={this.state.messages}/>
<MoreMessages
setMessages={this.setMessages}
onLoadMore={this.handleLoadMore} />
</div>
);
}
}
In your MoreMessages
component you can now do the following: 在您的
MoreMessages
组件中,您现在可以执行以下操作:
render() {
return (
<div id="more-messages">
<button onClick={this.props.onLoadMore}>More Messages</button>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.