it-swarm.com.ru

Передача нескольких реквизитов в компонент React

Я пытаюсь передать два аргумента, используя реквизиты в компоненте ImageText.
Я не уверен, что это правильный метод, или я должен создать карту и затем передать ее.

import React, { PropTypes, Component } from 'react'

const ImageText = () => (
    <div className="img-with-text">
        <img  className="img" src={props.imageUrl} />
        <p className="txt">{props.imageText}</p>
    </div>
);

export default ImageText;

Вызов этого компонента из другого следующим образом

<ImageText imageUrl="/js.com" imageText="food"/>

Но выкидывает ошибку как

Uncaught (in promise) ReferenceError: props is not defined
    at ImageText
5
oxy_js

В вашем случае вы используете "функции стрелок", которые должны передавать параметры в скобках 

const ImageText = () => (

Должно быть 

 const ImageText = (props) => (

Сейчас 

let props = {
imageUrl:"/js.com",
imageText:""food""
}
<ImageText {...props} />

Доступ внутри ImageText как 

{props.imageUrl} or {props.imageText}
13
BEJGAM SHIVA PRASAD

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

const ImageText = ({imageUrl, imageText}) => ( ... остальная часть кода ...);

1
Cornel Janssen

При использовании функционального компонента (когда вы не используете класс) вы должны передать реквизиты в качестве аргумента функции.

Вы можете передать столько компонентов, сколько вам нужно, в компонент. 

const ImageText = (props) => (...

Если вы используете стандартный компонент (как класс), вы бы назвали опору с

this.props

1
DirtyRedz

вы передаете реквизит для сброса компонента. это не реагирующая составляющая. передать реквизиты для сброса в качестве аргумента функции.

> import React, { PropTypes, Component } from 'react'
> 
> const ImageText = ({imageUrl, imageText}) => (
>     <div className="img-with-text">
>         <img  className="img" src={imageUrl} />
>         <p className="txt">{imageText}</p>
>     </div> );
> 
> export default ImageText;
0
Khalid Azam