Перемещать другую данные об одном окне в React

React использует state и props, чтобы сообщать данные между различными компонентами, или если utlizas последние версии книжного магазина, Context API.

, Чтобы использовать state и props у твоих компонентов должна быть связь отца - сына или иметь общего родственника сверху (братья). state - данные, которые он содержит отца и props, которые проходят с Вашими детьми. В случае связи братьев, ты был бы должен властвовать с компонента, который извлекает JSON эти данные Вашему отцу, и отец, в свою очередь, переместит эти данные Вашего другого сына как props.

BГЎsicamente @Narshe он дал тебе ответ. IntentarГ© объяснять Ваш ответ brindГЎndote пример для того, чтобы ты смог понимать это fГЎcilmente. Наблюдает следующий snippet и despuГ©s прочитай ее explicaciГіn: Такие

const App = (props) => {

  const tarjetas = [
    {
      imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
      titulo: "Titulo 1",
      descripcion: "Descripción 1"
    },
    {
      imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
      titulo: "Titulo 2",
      descripcion: "Descripción 2"
    }
  ];
  
  return (
    <div className="App">
      {tarjetas.map((dynamicData, index) => (
        <div className="imageContainer" key={`image${index}`}>
          <img
          width="100"
          onClick={props.mandarImagen.bind(this, dynamicData.titulo)}
          src={dynamicData.imagenUrl} />
          <p>{dynamicData.titulo}</p>
          <p>{dynamicData.descripcion}</p>
       </div>
      ))}
    </div>
  );
};

const Prueba = (props) => (
    <div className="App">
      <h1>{ props.titulo }</h1>
    </div>
);

const Padre = (props) => {

  const [titulo, setTitulo] = React.useState("Haz click en cada imagen para cambiar el título");

  const mandarImagen = (tituloImagen) => {
    setTitulo(tituloImagen);
  };
  
  return(
    <React.Fragment>
      <Prueba titulo={titulo} />
      <App mandarImagen={mandarImagen} />
    </React.Fragment>
  );

};

ReactDOM.render(
  <Padre />,
  document.getElementById('app')
);

.App .imageContainer {
  display: inline-block;
  margin: 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

<div id="app">
</div>

Как ты explicГі @Narshe, у тебя должен быть элемент отец, который содержал бы в твои два компонента:

<!-- Este es el componente Padre -->
<!-- tiene que recibir el título de App y enviárselo como propiedad a Prueba -->
<Padre>
    <!-- Este es el componente que tiene el título que quieres variar -->
    <Prueba />
    <!-- Este componente debe enviar el título a Padre -->
    <App />
</Padre>

, Поскольку ты можешь видеть внутри App, кликнув в каждом изображении, называет в один mГ©todo, который он, должно быть, послал как свойство enviГЎndole как parГЎmetro tГ-tulo изображения clicada:

onClick={props.mandarImagen.bind(this, dynamicData.titulo)}

И внутри Padre, ты можешь замечать, как ему посылается одна funciГіn как parГЎmetro mandarImagen в компонент App.

<App mandarImagen={mandarImagen} />

, Сказанный funciГіn не делает mГЎs, что менять state компонента обновляя переменную titulo (я использовал hooks , чтобы обновлять состояние, но ты можешь использовать setState, если твои компоненты - классы):

const mandarImagen = (tituloImagen) => {
    setTitulo(tituloImagen);
};

И как titulo он envГ - в как свойство в Prueba:

<Prueba titulo={titulo} />

, Итак, каждый раз, когда этот изменился, React actualizarГЎ компонент показывая нового tГ-tulo.

В React нет "окон", а компонентов, что renderizan в browser какие-то элементы. Я присоединяю тебя я soluciГіn в твой вопрос. ModifiquГ© для того, чтобы компонент App renderize Тестирует , и funciГіn, что должен показывать это, то, что он делает, состоит в том, чтобы менять состояние для того, чтобы React был должен обновлять render. Url изображения переместила ее как parГЎmetro в click, этом это cambiГ© tambiГ©n, равно как ее recepciГіn parГЎmetro в ней funciГіn MandarImagen. (AgrГ©gale твои url их imГЎgenes в дату доказательства).

import React, { Component } from "react";
import Prueba from "./Prueba";

class App extends Component {
  constructor() {
    super();
    this.state = {
        tarjetas: [
        {
          imagenUrl:
          "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
          titulo: "Titulo1",
          descripcion: "Descripción1"
        },
        {
          imagenUrl:
            "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
          titulo: "Titulo2",
          descripcion: "Descripción2"
        }
      ],
      ImagenUrl: ""
    };
  }
  MandarImagen(img) {
    this.setState({ ImagenUrl: img });
  }

  render() {
    return (
      <div className="App">
        {this.state.tarjetas.map(dynamicData => (
          <div>
             <img
              onClick={() => this.MandarImagen(dynamicData.imagenUrl)}
              src={dynamicData.imagenUrl}
              alt="texto img"
            />
            <p>{dynamicData.titulo}</p>
            <p>{dynamicData.descripcion}</p>
          </div>
        ))}
        <div>
        <Prueba ImageSource= {this.state.ImagenUrl}/>
        </div>
      </div>     
    );
  }
}
export default App;

И для Доказательства, он cambiГ© renderizado для того, чтобы он ничего не послал, если не выбрал пользователь какое-то изображение (начальное состояние) с условной одной

import React from "react";

const Prueba = props => {
  const imgSrc = props.ImageSource;
  if (imgSrc) {
    return (
      <div className="App">
        <h1>Imagen Seleccionada
          <img src={imgSrc} alt="prueba" />
        </h1>
      </div>
    );
  }
  return "";
};
export default Prueba;

PodrГ-Хозяев улучшать это с object desctructure, но на данный момент остается понятным asГ-. Схема остается, как который App - компонент с состоянием и манипулирует в Доказательство, у которого нет состояния, этого, чтобы гарантировать "single source of truth", или единственного шрифта правды (informaciГіn в действительности). Я должен добавлять, что ты не должен звонить в твои услуги данных в строителе, а в одной funciГіn компонента (как render), что называется componentDidMount () и с aquГ - обновлять твои данные в state, где, если они должны быть инициализировавшими в vacГ - или [] для договоренностей, например.

типов привета!