Передача данных в другой компонент OnClick - PullRequest
Новая
       14

Передача данных в другой компонент OnClick

1 голос
/ 12 мая 2019

Итак, у меня возникли проблемы с маршрутизацией и управлением моими данными.

Компонент Listing - это, по сути, тонна карточек с данными фильмов, которые я извлекаю из своей сущности. Я создал компонент для каждой карты, используя .map и добавив значение в реквизит.

Моя цель: Когда я нажимаю кнопку для любой из карточек, я хотел бы перейти на страницу и получить динамический доступ к названию этой карточки.

Например: : Предположим, я нажимаю кнопку с надписью «MoreInformation» для одной конкретной видеокарты. Я перенаправлен на страницу MoreInformation, потому что кнопка будет содержаться в Link.

Внутри страницы / компонента MoreInformation я хотел бы динамически добавить: 

<h1>{name}</h1>

Это просто базовый пример того, что я пытаюсь выполнить, но, другими словами, как мне перенести данные этой конкретной видеокарты на страницу MoreInformation, чтобы я мог получить к ней доступ для добавления динамических данных.

Буду очень признателен, если смогу получить отзыв, так как этот проект чувствителен ко времени ... Спасибо, ребята. 

const MoviesPage = () => {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    axios
      .get(
        `https://gist.githubusercontent.com/ernestosotelo/9932c659b460e5ddeec8a8ae76164a0d/raw/ce8d7b248f61e73bf3c767538728505d6bac9835/json`
      )
      .then(res => {
        const data = res.data
        setMovies(data)
      })
  }, [])

  return (
    <Layout>
      <div style={{ background: "hsl(215, 100%, 3%" }}>
        <TopThree />

        <p style={{ color: "#e0dfe2", fontSize: "1.7rem", marginTop: "3rem" }}>
          <b
            style={{
              padding: ".5rem 1.5rem .5rem 1.5rem",
              background: "#f9ba00",
              fontSize: "2rem",
              marginLeft: "4rem",
              color: "black"
            }}
          >
            !
          </b>{" "}
          Click 'Remove' to remove movies you definitely will not watch! There
          is an undo option.
        </p>

        <div className={listingCSS.block}>
          {movies.map(movie => {
            return (
              <Listing
                key={movie.name}
                name={movie.name}
                plot={movie.plot}
                date={movie.releaseDate}
                genre={movie.genre}
                imdbRating={movie.imdbRating ? movie.imdbRating : "N/A"}
                tomatoRating={movie.tomatoRating ? movie.tomatoRating : "N/A"}
                metaRating={movie.metaRating ? movie.metaRating : "N/A"}
                erbertRating={movie.erbertRating ? movie.erbertRating : "N/A"}
                tmdbRating={movie.tmdbRating ? movie.tmdbRating : "N/A"}
                movshoRating={movie.movshoRating}
                streamOn={movie.streamOn}
                poster={movie.poster}
                alt={movie.name}
              />
            )
          })}
        </div>
      </div>
    </Layout>
  )
}

Ответы [ 2 ]

1 голос
/ 12 мая 2019

Вам необходимо создать маршрут для отображения пройденных данных. Например 

<Route path="/movieInfo/:name" exact component={MoreInformation} />

В вашем листинге создайте ссылку на дополнительную информацию компонента 

<Link to={`/movieInfo/${this.props.name}`}>More info</Link>

В вашем компоненте MoreInformation можно получить доступ к реквизиту, как 

const { name } = this.props;

Простая демонстрация здесь

Если вы используете функциональные компоненты, вы можете получить значение, как показано ниже. Внутренние параметры матча. 

function MoreInformation(props) {

  const name = props.match.params.name;

  return <h1>{name}</h1>;
}
0 голосов
/ 12 мая 2019

Вы можете использовать JS с элементами HTML 5 для хранения данных в сеансе (sessionStorage.getItem() and sessionStorage.setItem()) или локально (localStorage.getItem() and localStorage.setItem()).

Если вы предпочитаете хранить данные в setItem с помощью переменных: 

var session_data = sessionStorage.myValue //For session only
var local_data = localStorage.myValue //For local

sessionStorage.myValue = 'value' //For session only
localStorage.myValue = 'value' //For local

Помните также: Для хранения объектов JavaScript вы должны установить и изменить их на строковое значение: 

sessionStorage.myObject = JSON.stringify(myObject); // Setting the object to a string

И проанализировать его обратно на объект для полученияданные при использовании getItem: 

var myObject = JSON.parse(sessionStorage.myObject); // Parsing JSON back from string to object

ТАКЖЕ: Вы можете использовать window.name для хранения информации, но учтите, что она работает только при использовании того же окна / вкладки, поэтомуубедитесь, что для вашей кнопки или ссылки значение target установлено на _self.

. Вы можете прочитать о хранении данных без файлов cookie с помощью JavaScript ЗДЕСЬ

Подробнее оAPI веб-хранилища: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Для получения информации о PersistJS (может вас заинтересовать): https://github.com/jeremydurham/persist-js

...