Мой вопрос - следующий: как я могу перемещать другую данные об одном окне, если я приношу данные из-за JSON? Цель состоит, в том, чтобы кликнув, он послал мне X тип информации в другое окно из-за react.
Я показываю код:
import React, { Component } from 'react';
import Prueba from './Prueba';
import './App.css';
class App extends Component {
constructor(){
super();
this.state = {
tarjetas: [
{
imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
titulo: "Titulo",
descripcion: "Descripción"
},
{
imagenUrl: "https://d2mn9dr0jv4622.cloudfront.net/wp-content/uploads/2017/12/11002955/continuous-integration-for-react-native.png",
titulo: "Titulo",
descripcion: "Descripción"
}
]
}
}
MandarImagen(){
console.log('AL HACER CLICK DEBE DE MANDAR LA MISMA IMAGEN A OTRA VENTANA');
}
render() {
return (
<div className="App">
{this.state.tarjetas.map((dynamicData) => (
<div>
<img
onClick={this.MandarImagen}
src={dynamicData.imagenUrl} />
<p>{dynamicData.titulo}</p>
<p>{dynamicData.descripcion}</p>
</div>
))}
</div>
);
}
}
export default App;
Эта часть - principial компонент App:
import React from 'react';
const Prueba = () => (
<div className="App">
<h1>AQUI DEBE DE APARECER LA IMAGEN DE APP</h1>
</div>
);
export default Prueba;
Здесь будь должен получать вышеупомянутый элемент, чтобы это показывать.
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Г - или [] для договоренностей, например.
типов привета!