बाल घटक को प्रॉप्स के रूप में AJAX परिणाम पास करना

Question

मैं प्रतिक्रिया में एक ब्लॉग बनाने की कोशिश कर रहा हूं। मेरे मुख्य ReactBlog घटक में, मैं पोस्ट की सरणी वापस करने के लिए एक नोड सर्वर पर एक AJAX कॉल कर रहा हूँ। मैं इस पोस्ट डेटा को प्रोप के रूप में विभिन्न घटकों में पास करना चाहता हूं।

विशेष रूप से, मेरे पास PostViewer नामक एक घटक है जो पोस्ट जानकारी दिखाएगा। मैं डिफ़ॉल्ट रूप से इसे अपने माता-पिता से प्रोप के माध्यम से पोस्ट की गई पोस्ट दिखाता हूं, और अन्यथा राज्य कॉल के माध्यम से सेट डेटा दिखाता हूं।

वर्तमान में, मेरे कोड के प्रासंगिक भाग इस तरह दिखते हैं।

var ReactBlog = React.createClass({ 
    getInitialState: function() { 
    return { 
     posts: [] 
    }; 
    }, 
    componentDidMount: function() { 
    $.get(this.props.url, function(data) { 
     if (this.isMounted()) { 
     this.setState({ 
      posts: data 
     }); 
     } 
    }.bind(this)); 
    }, 
    render: function() { 
    var latestPost = this.state.posts[0]; 
    return (
     <div className="layout"> 
     <div className="layout layout-sidebar"> 
      <PostList posts={this.state.posts}/> 
     </div> 
     <div className="layout layout-content"> 
      <PostViewer post={latestPost}/> 
     </div> 
     </div> 
    ) 
    } 
}); 

और बच्चे घटक:

var PostViewer = React.createClass({ 
    getInitialState: function() { 
    return { 
     post: this.props.post 
    } 
    }, 
    render: function() { 
    /* handle check for initial load which doesn't include prop data yet */ 
    if (this.state.post) { 
     return (
     <div> 
      {this.state.post.title} 
     </div> 
    ) 
    } 
    return (
     <div/> 
    ) 
    } 
}); 

ऊपर काम करता है अगर मैं बाहर स्वैप बयान और मेरे बच्चे की में सामग्री this.props को प्रस्तुत करना है, तो * हालांकि, इसका मतलब है कि मैं नहीं कर सके '। बाद में सामग्री के माध्यम से सामग्री को बदलना, सही?

TLDR: मैं एक डिफ़ॉल्ट के बाद एक बच्चे घटक में रंगमंच की सामग्री (एक AJAX कॉल के परिणाम) के माध्यम से देखा जाना चाहिए सेट करना चाहते हैं, और मैं क्या पोस्ट (किसी अन्य के onClick घटनाओं को जोड़कर देखा जा रहा है बदलने में सक्षम होना चाहता हूँ घटक) जो राज्य को अद्यतन करेगा।

क्या यह इसके बारे में जाने का सही तरीका है?

मेरे ऐप की घटकों के वर्तमान पदानुक्रम हैं:

React Blog 
- Post List 
    - Post Snippet (click will callback on React Blog and update Post Viewer) 
- Post Viewer (default post passed in via props) 

धन्यवाद!

संपादित करें:

तो क्या मैं this.state के आधार पर एक मूल्य का उपयोग कर ReactBlog में रंगमंच की सामग्री संलग्न किया गया था कर समाप्त हो गया। यह सुनिश्चित करता है कि जब मैं राज्य बदलता हूं और बाल घटकों में सही ढंग से प्रस्तुत करता हूं तो यह अपडेट होता है। हालांकि, ऐसा करने के लिए मुझे सभी विभिन्न बाल घटकों के माध्यम से कॉलबैक पर क्लिक करना पड़ा। क्या ये सही है? ऐसा लगता है जैसे यह बहुत गन्दा हो सकता है। यहाँ मेरा पूरा उदाहरण कोड है:

var ReactBlog = React.createClass({ 
    getInitialState: function() { 
    return { 
     posts: [], 
    }; 
    }, 
    componentDidMount: function() { 
    $.get(this.props.url, function(data) { 
     if (this.isMounted()) { 
     this.setState({ 
      posts: data, 
      post: data[0] 
     }); 
     } 
    }.bind(this)); 
    }, 
    focusPost: function(slug) { 
    $.get('/api/posts/' + slug, function(data) { 
     this.setState({ 
     post: data 
     }) 
    }.bind(this)); 
    }, 
    render: function() { 
    return (
     <div className="layout"> 
     <div className="layout layout-sidebar"> 
      <PostList handleTitleClick={this.focusPost} posts={this.state.posts}/> 
     </div> 
     <div className="layout layout-content"> 
      <PostViewer post={this.state.post}/> 
     </div> 
     </div> 
    ) 
    } 
}); 

var PostList = React.createClass({ 
    handleTitleClick: function(slug) { 
    this.props.handleTitleClick(slug); 
    }, 
    render: function() { 
    var posts = this.props.posts; 

    var postSnippets = posts.map(function(post, i) { 
     return <PostSnippet data={post} key={i} handleTitleClick={this.handleTitleClick}/>; 
    }, this); 

    return (
     <div className="posts-list"> 
     <ul> 
      {postSnippets} 
     </ul> 
     </div> 
    ) 
    } 
}); 

var PostSnippet = React.createClass({ 
    handleTitleClick: function(slug) { 
    this.props.handleTitleClick(slug); 
    }, 
    render: function() { 
    var post = this.props.data; 
    return (
     <li> 
     <h1 onClick={this.handleTitleClick.bind(this, post.slug)}>{post.title}</h1> 
     </li> 
    ) 
    } 
}); 

var PostViewer = React.createClass({ 
    getInitialState: function() { 
    return { 
     post: this.props.post 
    } 
    }, 
    render: function() { 
    /* handle check for initial load which doesn't include prop data yet */ 
    if (this.props.post) { 
     return (
     <div> 
      {this.props.post.title} 
     </div> 
    ) 
    } 
    return (
     <div/> 
    ) 
    } 
}); 

फिर भी कुछ प्रतिक्रिया/आशा है कि यह मदद करता है पाने के लिए उम्मीद कर रहा!

Answer 1

एक ब्लॉग अधिकांश भाग के लिए स्थैतिक है, इसलिए आप राज्य का उपयोग करने के बजाय हर समय "सबकुछ प्रस्तुत करने" के लिए प्रतिक्रिया अपरिवर्तनीय संरचनाओं का फायदा उठा सकते हैं।

डेटा लाने के लिए इसके लिए एक विकल्प राउटर (जैसे page.js) का उपयोग करना है। ,)

Answer 2

राज्य दृश्य फ़ाइल प्रतिक्रिया, पुन: प्रयोज्य घटकों के लिए नहीं है, यहाँ PostViewer की तरह मुख्य होना चाहिए यह सिर्फ होगा;

यहाँ कुछ कोड http://jsbin.com/qesimopugo/1/edit?html,js,output

आप कुछ समझ में नहीं आता है, तो बस मुझे पता है है पद शीर्षक प्रदान करें यदि उसके पास प्रोप के रूप में शीर्षक है, अन्यथा यह खाली हो जाएगा।

var PostViewer = React.createClass({ 

    render: function() { 

    if (this.props.hasOwnProperty('title')) { 
     return (
     <div> 
      {this.props.title} 
     </div> 
    ) 
    } 
    return (
     <div/> 
    ) 
    } 
}); 

Answer 3

isMounted से छुटकारा और यदि आप कॉलबैक नीचे कई स्तरों

Answer 4

यह एक पुरानी सवाल है, लेकिन मैं अभी भी प्रासंगिक मानना ​​है कि गुजर रहे context का इस्तेमाल करते हैं हो जाओ, तो मैं में फेंक करने जा रहा हूँ मेरी 2 सेंट

आदर्श रूप से, आप किसी भी AJAX कॉल को किसी घटक के अंदर सही करने के बजाय किसी क्रिया फ़ाइल में अलग करना चाहते हैं। अपने राज्य को प्रबंधित करने में मदद के लिए रेडक्स जैसे कुछ का उपयोग करने के बिना (जो, इस समय, मैं रेडक्स + रिएक्ट-रेडक्स की सिफारिश करता हूं), आप भारी कंटेनर के लिए "कंटेनर घटकों" नामक कुछ का उपयोग कर सकते हैं आप और उसके बाद मुख्य लेआउट कर रहे घटक में प्रोप का उपयोग करें। यहां एक उदाहरण दिया गया है:

// childComponent.js 
import React from 'react'; 
import axios from 'axios'; // ajax stuff similar to jquery but with promises 

const ChildComponent = React.createClass({ 
    render: function() { 
    <ul className="posts"> 
     {this.props.posts.map(function(post){ 
     return (
      <li> 
      <h3>{post.title}</h3> 
      <p>{post.content}</p> 
      </li> 
     ) 
     })} 
    </ul> 
    } 
}) 

const ChildComponentContainer = React.createClass({ 
    getInitialState: function() { 
    return { 
     posts: [] 
    } 
    }, 
    componentWillMount: function() { 
    axios.get(this.props.url, function(resp) { 
     this.setState({ 
     posts: resp.data 
     }); 
    }.bind(this)); 
    }, 
    render: function() { 
    return (
     <ChildComponent posts={this.state.posts} /> 
    ) 
    } 
}) 

export default ChildComponentContainer;