时间戳

首页 > 解决方案 > 在 React 中，将文本作为道具传递给组件是好还是坏？

reactjs - 在 React 中，将文本作为道具传递给组件是好还是坏？

问题描述

例如，假设您有一个要在应用程序中重复使用多次的组件。

因此，您将其设置为接收不同/独特的文本、多个 h2 和多个 ps 作为道具。

const Sets = ({ oneH, twoH, threeH, oneP, twoP, threeP }) => {
  return (
    <div className="sets">
      <div>
        <h3>{oneH}</h3>
        <p>{oneP}</p>
      </div>

      <div>
        <h3>{twoH}</h3>
        <p>{twoP}</p>
      </div>

      <div>
        <h3>{threeH}</h3>
        <p>{threeP}</p>
      </div>
    </div>
  );
};

然后你这样使用它：

<Sets
          oneH="Blue Skies"
          twoH="Good Times"
          threeH="Hotels, Etc."
          oneP="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
          twoP="Different lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
          threeP="Unique lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, veniam voluptatibus."
/>

它的使用是否有太多的文字，是否太笨重？有没有更好的方法？

标签： reactjstextcomponents

解决方案

尝试进一步分解它，并将文本集放入 JS 数组中。

为了使源文本更具可读性：

const texts = [
    {
       h:"abc",
       p:"123"
    },
    {
     ...
    }
]

然后将其传递给您的Sets元素：

<Sets texts={texts} />

然后在 中Sets，迭代texts：

const Sets = ({ texts }) => {
  return (
    <div className="sets">
      {texts.map(({h,p}) => (
      <div>
        <h3>{h}</h3>
        <p>{p}</p>
      </div>
      )
    </div>
  );
};

这使您可以在一个地方真正轻松地编辑源文本；它甚至可以从外部源动态加载。

如您所见，单个texts道具使其更容易传递。

最后，迭代允许您不必输入每个道具！

推荐阅读