如何将变量从一个组件传递到另一个未以任何方式链接的组件REACT

时间:2019-04-12 22:41:18

标签: reactjs router

我有一个组件A,它可以获取数据。我已经将来自API的imdb_id存储到名为“ imdb_id”的const变量中。现在,我想将此变量传递给另一个组件。如果我将其作为PROP传递,则该组件将与我不需要的组件A一起呈现。我只想传递变量,以便可以使用组件B中传递的变量根据变量的值获取更多数据...该怎么办? IM新的反应。从字面上讲,这是第3天,请对我来说很容易。

以某种方式将“ const movieImdbID = data.imdb_id”传递到组件B。...

尝试通过道具传递>组件B被组件A渲染(我不想要)

组件A:

 handleClick = (e, data) => {
    const movieImdbID = data.imdb_id
    alert(movieImdbID)
    // return <Movie movieImdbID="tt4355435" />
  };

  render() {
    const { data, movieImdbID } = this.state;
    return (
      <React.Fragment>
        <div className="container-fluid">
          <div className="row">
            {data.length
              ? data.map(data => (
                  <div
                    className="col-sm p-0 my-2"
                    key={data._id}
                    onClick={e => this.handleClick(e, data)}
                  >
                    <Link to="/Movie">
                      <div className="movie-wrap my-2">
                        <img
                          className="movie-images"
                          src={data.images.banner}
                          alt="movie"
                        />
                        <h6 className="movie-title text-center text-uppercase">
                          {data.title}
                        </h6>
                      </div>
                    </Link>
                  </div>
                ))
              : null}
          </div>
        </div>
      </React.Fragment>
    );
  }

组件B

import React, { Component } from "react";

class Movie extends Component {
  render() {
    return (
      <div>
        <div className="text-success text-center">Movie Component</div>
      </div>
    );
  }
}

export default Movie;

0 个答案:

没有答案