javascript 我可以/如何从外部JS对象获取数据到React组件中？

vohkndzv 于 2023-08-02 发布在 Java

关注(0)|答案(1)|浏览(78)

我是React的新手，想开始在我的CMS中使用它。由于某些限制，我必须在本地构建组件/应用程序，并将编译后的JS复制到我的CMS上。这似乎工作。
现在，我想用来自CMS的数据填充组件的 prop 。我认为一个好方法是在CMS上创建一个JS对象，然后让React应用程序来拾取它。
问题是我不知道如何在当地做到这一点。我不能用绝对路径访问数据对象，因为（现在）它只是一些内联JS。例如：

<script>
    const componentObj = {
        title: "Hello! I'm Data from obj";
    };
</script>

字符串
在我的（非常简单的）React应用程序中，我尝试了三元运算符try catch和if (typeof componentObj !== 'undefined') {，但都不起作用。它们无法构建，因为componentObj未在本地定义。

function App() {

  const greeting = componentObj.title ? componentObj.title : 'Data not from component object';

  return (
    <div className="App">
      <header className="App-header">
        <Welcome text={greeting}/>
      </header>
    </div>
  );
}

const Welcome = (props) => {
  return <h1>{props.text}</h1>; 
};

型
有人知道如何处理这个问题，或者我做错了什么吗？
多谢了。

JavaScript

来源：https://stackoverflow.com/questions/76809128/can-how-do-i-get-data-from-an-external-js-object-into-a-react-component

1条答案

按热度按时间

w8f9ii691#

你想把它保存在单独的JS文件中吗？如果是，则需要在使用该对象列表的文件的顶部导入它。
例如，在ComponentList.js中，您的数据看起来像这样：

export const ComponentList= [
    { title: "about1" },
    { title: "about2" },
    ...
];

字符串
在其他组件中，您需要在顶部导入它才能使用它：

import { ComponentList } from "../Data/ComponentList"; // Import from Data folder

const SomeComponent = () => {
  return (
    <div>
      // use that list 
      {ComponentList.length === 0 ? (
        <p>ComponentList is empty</p>
      ) : (
        ComponentList.map((item, index) => (
          <div key={index}>
            {item.title}
          </div>
        ))
      )}
    </div>
  );
};

export default SomeComponent;

型
您可以像处理三元运算符一样检查它是否为空，并有条件地显示文本消息。

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 我可以/如何从外部JS对象获取数据到React组件中？

1条答案

相关问题

热门标签

最新问答