将多个道具传递给 React 组件

Question

I am trying to pass two argument using props in ImageText component.
I am not sure if it is right method or I have to create a map and then pass it.

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;

Calling this component from another as follows

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

But is throwing error as

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

Answer 1

In your case issue with you are using "Arrow functions" which needs to pass params inside brackets

const ImageText = () => (

Should be

 const ImageText = (props) => (

Now

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

Access inside ImageText like

{props.imageUrl} or {props.imageText}

Answer 2

When you define your component like that, you need to pass your props as parameters to the anonymous function:

const ImageText = ({imageUrl, imageText}) => ( ... rest of the code ... );

Answer 3

When using a functional component (when you don't use a class) you must pass the props as an argument into to the function.

You can pass as many props add you need into a component.

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

If using a standard component (as a class) you would call a prop with

this.props

Answer 4

you are passing the props to dump component. it's not react component. pass the props to dump as function argument.

> 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;

Answer 5

Passing down multiple props in reactJS can be done using either of following ways:

// in App.js
<Modal post= {postProps} user={userDetails}/>

// in Modal.js
const Modal = (props) => {
   const title = props.post.title
   const username = props.user.username
   // rest of the code..
}

in above example props (in Modal.js) forms an object with keys named post and user , thus you can access them like objects.

Another way would be:

// in App.js
<Modal post={postProps}/>

// in Modal.js
const Modal = ({post}) => {
   const title = post.title
   // rest of the code..
}

in this example post object has been imported explicitly in Modal.js

Final Remark : With first approach it gets very clear looking at your code that what has been passed down as props from parent element and might be clear to read.

While with second approach i argue that, it is better to use in scenarios where its just one prop to pass, since you don't have to write props. everytime

Answer 6

Creating:

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

export default ImageText;

---

Using; when you have already defined imageUrl and imageText somewhere before the return keyword:

<ImageText {...{imageUrl, imageText}}