时间戳

首页 > 解决方案 > 将巨大的选项列表导入主组件

reactjs - 将巨大的选项列表导入主组件

问题描述

我正在使用 React 16.12，并且我有一个包含表单选择下拉框的组件。选项字段部分很大......就像超过 75 个选项。由于它很长，我不想弄乱我的主要表单组件。

所以我尝试将它放在一个名为 options.js 的单独文件中，如下所示：

<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>

但是每当我尝试导入时，我都会收到此错误：

  Failed to compile
  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment 
  <>...</>?

我希望它在主表单组件中看起来像这样：

 import React from "react";
 import "./options" As OptionListing;

const App = () => (

   <Form>
      <select name="optionTypes">
          <OptionListing>
      </select>
   </Form>
);

render(<App />, document.getElementById("root"));

这可能吗？

谢谢！

标签： reactjs

解决方案

这是可能的，但您需要一个封装组件，试试这个。 

import React from "react";

const OptionList = () => {

    return (
        <React.Fragment>
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </React.Fragment>
    )
}

export default OptionList

这是以速记方式做同样事情的另一种方式（较新的 React 版本）

import React from "react";

    const OptionList = () => {

        return (
            <>
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </>
        )
    }

    export default OptionList

https://reactjs.org/docs/fragments.html

推荐阅读