传入 object 作为道具反应

Question

I have a function class:

function TopicBox({topicName, article1}) {
    return (
        <div className="TopicBox">
            <h1>{topicName}</h1>
            <div className="topicDivider" />
            <Article 
                    articleImageLink={article1.imageLink} />

--MORE CODE--
export default TopicBox

As you can see it takes in the props topicName, which is just a string, and article1 which is an object. article1 variable will have child components, such as.imageLink as seen on the last line of code. Now on another file called I want to create a topic box like such:

<TopicBox topicName="Hi" 
                        article1={imageLink:"google.com",
                                title:"hi"}/>

So again the topicName prop is just a string, so that works fine. Now I'm creating a new object called article1 that contains the child variable imageLink. However this code doesn't work. I get the following error:

Parsing error: Unexpected token, expected "}"

  10 |             <div className="TopicLists">
  11 |                 <TopicBox topicName="Hi" 
> 12 |                         article1={imageLink:"google.com",
     |                                            ^
  13 |                                 title:"hi"}/>
  14 |                 <TopicBox />

So to debug, I tried replacing the: to a = when I create the child object, but I get another error:

'imageLink' is not defined.eslintno-undef

Can you please let me know how to pass in an object as a prop?

Thanks!

Answer 1

Try this way

<TopicBox
  topicName="Hi"
  article1={{ imageLink: "google.com", title: "hi" }}
></TopicBox>

Answer 2

You can do it like this;

const article1 = {imageLink: "google.com", title: "hi"}
<TopicBox
  topicName = "Hi"
  article1 = {article1} />

Another way you can do this is by passing an object property as individual props using spread operator;

const article1 = {imageLink: "google.com", title: "hi"}
<TopicName 
  topicName = "Hi"
  {...article1} />