傳入 object 作為道具反應

Question

我有一個 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

正如你所看到的，它接受了props topicName，它只是一個字符串，以及article1，它是一個object。 article1 變量將具有子組件，例如在最后一行代碼中看到的 .imageLink。 現在在另一個名為我想創建一個主題框的文件上，如下所示：

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

所以 topicName 道具只是一個字符串，所以它工作正常。 現在我正在創建一個名為 article1 的新 object，其中包含子變量 imageLink。 但是，此代碼不起作用。 我收到以下錯誤：

Parsing error: Unexpected token, expected "}"

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

所以為了調試，當我創建子 object 時，我嘗試將：替換為 a =，但我得到另一個錯誤：

'imageLink' is not defined.eslintno-undef

你能告訴我如何傳遞一個 object 作為道具嗎？

謝謝！

Answer 1

試試這個方法

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

Answer 2

你可以這樣做；

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

另一種方法是使用擴展運算符將 object 屬性作為單獨的道具傳遞；

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