json 如何通过prop和HTML标记将URL向下传递到组件以解耦前端

ngynwnxp 于 2023-01-14 发布在其他

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

我正在用ReactJS制作我的第一个个人网站，通常是一个后端的家伙。我刚刚开始与软件系统一起工作，并受到领域驱动设计的启发。请原谅我的问题的基本性质。
我之所以被React吸引，是因为它使用 prop 以一种解耦的方式处理数据。
当我建立这个网站时，我注意到我的代码变得非常混乱，许多网址隐藏在html标签中，我担心有一天我可能需要改变它们。
我想将其解耦，并将URL从JSON文件传递到Prop中。
实现此目标的最佳做法是什么
下面是我的代码示例。

<div className="tp-minimal__design-thumb" style={{ **backgroundImage: `url(assets/img/banner/hero-banner.JPG)`,** backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>

我怎样才能让它接受来自这样一个层次JSON结构的数据呢？

const imageData = {
    "home": {
            HeroAreaHome: "url(assets/img/banner/hero-banner.JPG)"
        }
}``

我想把网址传给这个（伪代码）：

import imageData from "../../data/imageData"

<div className="tp-minimal__design-thumb" style={{ **backgroundImage: `{imageData.home.HeroAreaHome}** backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>

JSON

来源：https://stackoverflow.com/questions/75065834/how-can-i-pass-a-url-down-to-a-component-through-a-prop-and-html-tag-to-decouple

1条答案

按热度按时间

c3frrgcw1#

你应该能够使用模板常量将变量传递给jsx，类似这样的操作应该对你有用：

<div className="tp-minimal__design-thumb" style={{ backgroundImage: `${imageData.home.HeroAreaHome}`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>

此外，该组件没有使用react props来传递imageData，因为数据是通过常规的导出和导入来传递的。要使用react props，当组件在父组件中示例化时，您需要向下传递变量。
父组件：

import DesignThumb from './path-to-component'
import imageData from "../../data/imageData"

function ParentComponent() {

  return {
    <>
      <DesignThumb backgroundImage={imageData.home.HeroAreaHome} />
    </>
  }
}

子组件：

export default function ChildComponent({backgroundImage}) {

  return <div className="tp-minimal__design-thumb" style={{ backgroundImage: `${backgroundImage}` backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>
}

如果背景图像不变，那么导出/导入imageData是一个很好的模式，可以用来代替使用props。上面的代码只是使用react props的一个例子。

赞(0）回复(0）举报 2023-01-14

我来回答

json 如何通过prop和HTML标记将URL向下传递到组件以解耦前端

1条答案

相关问题

热门标签

最新问答