Question

React.js

在example.js主页上，有4个链接：link1，link2，link3，link4

当用户单击链接之一时，他们将被发送到名为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);
}

OR

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

OR

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

问题：

我如何告诉template.js文件显示相关信息。

Answer 1

您可以通过链接传递查询，然后直接从URL中读取它。我这样做：

您的链接

// Here we want to send our search terms, this is just an example with 'someId'
<a src="/template?first_name=john"></a>
<a src="/template?first_name=jenny"></a>
<a src="/template?first_name=gabriel"></a>
<a src="/template?first_name=jose"></a>

您可以使用window.location.search或window.location.hash来读取搜索值，具体取决于您的路由器。

我更喜欢使用查询字符串模块中的解析功能

您的模板

import React, { Component } from 'react';
import * as qs from 'query-string';

class Dashboard extends Component {
  render() {
    const {
      location,
    } = this.props;
    const { search } = location;
    const query = qs.parse(search, { ignoreQueryPrefix: true });
    const info = YOURJSONDATA.filter(data => (
      // Here we compare the field we want with the query search
      data.first_name === query.first_name
    ));
    return (
      <div>
        {
          !!(info) && info.map(o => (<div>{o.first_name}</div>))
        }
      </div>
    );
  }
}

Answer 2

这就是我的方法。...

在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>
    );
  }

显示与json文件不同的数据，具体取决于单击的链接

2 个答案: