React.JS - передача данных из одного компонента в другой - PullRequest
Новая
       6

React.JS - передача данных из одного компонента в другой

0 голосов
/ 28 ноября 2018

Отказ от ответственности: Я довольно новичок в "React.JS".

Я пытаюсь получить значение из одного компонента, поэтому я могу использовать его в своем другом компоненте для отображения соответствующего содержимого.Компонент 1 перечисляет все шоу из моей базы данных.Компонент 2 содержит информацию о каждом конкретном шоу на своей собственной странице.Я хочу сделать это без жесткого кодирования, так как это будет описано как не очень хороший подход.

Вот код:

Component1.JSX 

import React, { Component } from 'react';
import './SecondPage.css';
import { Button, ButtonGroup, DropdownItem, DropdownMenu, DropdownToggle, ButtonDropdown } from 'reactstrap';
import Helmet from 'react-helmet';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Showing from '../Showing/Showing.jsx';


class SecondPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showingsList: [],
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){
    const self = this;
    axios.get('/api/loadShowings')
    .then(response => {
      var  showingsList  = response.data
   this.setState({ showingsList });

  }
    );

  }

  handleSubmit(){

  }

  render(){
    return(
      <div class="grid-container1">
      {
        this.state.showingsList.map((showing) => {
          return <div showing = {showing} key = {showing.id}>
            <div class="grid-item1 "><img width = "200px" height = "200px" src={showing.image}/>
            <h3>{showing.title}</h3>
            <h5>{showing.description}</h5>
            <Link to = "/Showing">
            <Button  className="btnShowings">MORE</Button>
            </Link>
        </div>







          </div>})
      }
      </div>
    )
  }
}

export default SecondPage;

Component2.JSX 

import React, {Component} from 'react';
import './Showing.css';
import Helmet from 'react-helmet';
import {Button} from 'reactstrap';
import {Link} from 'react-router-dom';
import axios from 'axios';

class Showing extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          showingsList: [], 
        };

      }

      componentDidMount(){
        const self = this;
        axios.get('/api/loadShowings')
        .then(response => {
          var  showingsList  = response.data
       this.setState({ showingsList });
       console.log(showingsList["0"].title)


      }
        );

      }

    render(){
        return(
<div>

      {
        this.state.showingsList.map((showing) => {
          return <div showing = {showing} key = {showing.id}>


          <Helmet>
          <style>{'body { background-color: gray; }'}</style>
          </Helmet>


            <div class="grid-container">
            <div class="item1">{showing.title}</div>
            <div class="item2"><img width = "200px" height = "200px" src={showing.image}/></div>
            <div class="item3">{showing.description}</div>  
            <div class="item4"> <a href = "/Booking">
                    <Button bsStyle="info" size = "lg">Make a booking</Button>
                    </a></div>

            </div>



          </div>})
      }

            </div>
        )
    }
}

export default Showing;

Я попробовал несколько вещей, которые я видел в различных уроках - используя this.props.state, но не смогчтобы он работал, как пример был сделан для основного файла JSX (App.js).Я также попытался сделать аксио post и get, но это становится настолько сложным.Я прошу совета о том, что использовать, поэтому мне не нужно создавать много разных страниц для каждого случая.Большое спасибо!

...