React.js

मुख्य पृष्ठ example.js पर 4 लिंक हैं: लिंक 1, लिंक 2, लिंक 3, लिंक 4

जब उपयोगकर्ता किसी एक लिंक पर क्लिक करता है तो उन्हें template.js नामक साइट पर भेज दिया जाता है।

प्रत्येक लिंक उपयोगकर्ता को एक ही साइट, template.js पर भेजता है, हालांकि डेटा इस पर निर्भर करता है कि किस लिंक पर क्लिक किया गया था।

मैंने अपनी .json फ़ाइलों में से किसी एक से पूरे डेटा को बिना किसी कार्यक्षमता और शैली के प्रदर्शित करने की कोशिश की है - लेकिन मुझे कोई प्रतिक्रिया नहीं मिली ... मैंने कोशिश की है:

var data = require(url);
for(var i = 0; i < data.length; i++) {
    var obj = data[i];
    console.log("Name: " + obj.first_name + ", " + obj.last_name);
}

या

fetch(url)
 .then(response =>  response.json().then(data => ({status: 
   response.status, body: data})))
 .then(object => console.log(object));

या

fetch(url) 
.then(response = response.json())

प्रश्न:

प्रासंगिक जानकारी प्रदर्शित करने के लिए मैं template.js फ़ाइल को कैसे बताऊंगा।

0
Gabson 30 जुलाई 2019, 23:13

1 उत्तर

सबसे बढ़िया उत्तर

यहां बताया गया है कि मैंने यह कैसे किया ....

Learn.js__ में

//reading url
  componentDidMount() {
    const values = queryString.parse(this.props.location.search)
      console.log(values.filter)
      console.log(values.origin)
  }

  //redirection
  redirect = (url) => {
    this.props.history.push(url)
    console.log(this.props)
    }

          <LearnCard onClick={() => this.redirect("/learn/Template/Cooks")} name="Cooks" image={process.env.PUBLIC_URL + '/image/cook.jpg'}/>
          <LearnCard onClick={() => this.redirect("/learn/Template/Websites")} name="Websites" image={process.env.PUBLIC_URL + '/image/website.jpg'}/>
          <LearnCard onClick={() => this.redirect("/learn/Template/Tv-Series")} name="Tv-Series" image={process.env.PUBLIC_URL + '/image/tv_series.jpg'}/>
          <LearnCard onClick={() => this.redirect("/learn/Template/Cookbooks")} name="Cookbooks" image={process.env.PUBLIC_URL + '/image/cookbook.jpg'}/>

Template.js__ में

componentDidMount () {
    const url_name = this.props.match.params.name
    console.log(this.props.match.params.name)

    if (url_name === "Cooks") {
      this.setState({data: cooks})
      console.log(cooks)
    }
    if (url_name === "Cookbooks") {
      this.setState({data: cookbooks})
      console.log(cookbooks)
    }
    if (url_name === "Tv-Series") {
      this.setState({data: tv_series})
      console.log(tv_series)
    }
    if (url_name === "Websites") {
      this.setState({data: websites})
      console.log(websites)
    }
  }


  render () {
    return (
      <div>
        <div className="templateWrapper">
          {
            this.state.data && this.state.data.map((data, key) => {
              return <TemplateCard className="templateCard" name={data.name} description={data.description} image={data.image} cuisine={data.cuisine} author={data.author} channel={data.channel} href={data.web_url} href={data.chef_url}/>
            })
          }
        </div>
      </div>
    );
  }
0
Gabriel 2 अगस्त 2019, 16:45