ReactJS - 保存 HTML 片段/模板的最佳实践 [重复]答案

【问题标题】：ReactJS - Best Practice For Saving HTML Snippets/Templates [duplicate]ReactJS - 保存 HTML 片段/模板的最佳实践 [重复]
【发布时间】：2020-04-03 02:40:05
【问题描述】：

希望有人可以为我指明正确的方向，即在 React 应用程序中存储 HTML 标记的最简洁/最被接受的方式。

想象一下我的场景：我有一个国家/地区下拉菜单 (<select>)。当您从菜单中选择一个国家时，“州/省”<select> 将变为可见。根据您选择的国家/地区，将 React.Fragment 插入到新的“州/省”<select> 字段中，为您提供所选国家/地区的选项。

一切正常；问题是在我的组件类中我有三个非常大的 React.Fragments 作为变量/成员，尤其是我的所有方法。其中一个看起来像这样。

canadaStateProvinceOptions = (
    <React.Fragment>
        <option value="">--Choose One--</option>
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="CD">Canada (Province unknown)</option>
        <option value="MB">Manitoba</option>
        <option value="XN">Nunavut Providence</option>
        <option value="NF">Newfoundland (Includes Labrador)</option>
        <option value="NK">New Brunswick</option>
        <option value="NS">Nova Scotia</option>
        <option value="NT">Northwest Territories (Canadian Admin. Division)</option>
        <option value="ON">Ontario</option>
        <option value="PE">Prince Edward Island</option>
        <option value="PQ">Quebec</option>
        <option value="SN">Saskatchewan</option>
        <option value="YT">Yukon (Canadian Territory)</option>
    </React.Fragment>
);

还有两个有更多选择。我应该将它们保留为我的组件的类成员还是有更好的方法来区分这个问题？

【问题讨论】：

React 是数据驱动的，您可以将国家代码和名称存储在静态 JSON 文件中，然后编写一个小的 JSX 循环来呈现选项。
@EmileBergeron 您发布的链接上的答案非常有趣且干净。我喜欢这种方法。感谢您对我刚接触 React 的耐心。我的下一个最佳想法是让我正在构建的表单的这个页面成为嵌套在主表单中的自己的组件。我觉得我的死标记太多了！

标签： javascript html reactjs semantics markup

【解决方案1】：

不要存储整个片段，而是只保存您需要的数据，然后遍历它们。所以你的例子看起来像

const canadianProvinceOptions = [
  {
    value: 'AB',
    name: 'Alberta',
  },
  {
    value: 'BC',
    name: 'British Columbia',
  }
  ...etc
]

然后当你需要使用它们时，你可以做类似的事情

<select ...>
  <option value="">--Choose One--</option>
  {canadianProvinceOptions.map(option => (
    <option value={option.value}>{option.name}</option>
  ))}
</select>

【讨论】：

【解决方案2】：

将选项定义为数组。您可以在单独的文件中执行此操作

const canadaStateProvinceOptions = [
    {value: "", label: "--Choose One--"},
    {value: "AB", label: "Alberta"},
    // add more values here
]

这是您的主 App 组件或父组件

const MyAppComponent = () => (
    <div>
        <p> Random stuff </p>
        <p> The select </p>
        <ComponentWithOptions options={canadaStateProvinceOptions} />
    </div>
)

一个简单的 util 组件，删除样板片段，选项地狱

const ComponentWithOptions = ({options}) => (
    <React.Fragment>
        {options.map({value, label} => <option value={value}>{label}</option>)}
    </React.Fragment>
)

【讨论】：