时间戳

首页 > 解决方案 > ReactJS：将简单的对象道具传递给组件

reactjs - ReactJS：将简单的对象道具传递给组件

问题描述

我是新手，我的简单演示存在两个问题：首先，我似乎无法将对象道具传递给组件（因此{obj.testKey}应该以其他方式呈现）；其次，尽管它的使用方式与道具{info}完全相同，但我似乎无法获得渲染。title

我怎样才能得到{obj.testKey}和{info}渲染？我假设我遗漏了一些非常明显的东西，因为这看起来很基本。

这是演示组件：

import React from "react";

const TestComponent = ({ title }, { info }, { obj }) => {
  return (
    <div>
      <p>test paragraph from component</p>
      <h2>{title}</h2>
      <div>
        efer {info} {obj.testKey}
      </div>
      {console.log("info", info)}
    </div>
  );
};

export default TestComponent;

和主应用程序：

import React from "react";
import TestComponent from "./test-component";

const DemoComponent = () => {
  return <p>hello!</p>;
};

const App = () => {
  return (
    <div>
      <p>test</p>
      <DemoComponent />
      <TestComponent
        title="title test"
        info="info test"
        obj={ "testKey": "value" }
      />
    </div>
  );
};

export default App;

为了方便起见，还有一个stackblitz演示。

另外，为什么我必须解构道具{ title }, { info }, { obj }？这感觉像是一种次优的方式。

感谢您在这里的任何帮助。

标签： reactjs

解决方案

第一个问题是由于不正确的解构。正确的方法看起来像

const TestComponent = ({ title, info,  obj }) => {
...
}

第二个是因为你必须将一个对象作为参数传递两个{}这样的{{testKey: "value"}}

<TestComponent   
   title="title test"
   info="info test"
   obj={{ testKey: "value" }}
/>

推荐阅读