代码之家 › 专栏 › 技术社区 › SkyeBoniwell

将庞大的选项列表导入主组件

reactjs

SkyeBoniwell · 技术社区 · 4 年前

我使用的是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"));

这可能吗?

谢谢!

0 回复 | 直到 4 年前

Chris Hawkes 4 年前

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

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

Sumanth Madishetty 4 年前

尝试修改 Options.js 如下图所示

<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>

OR返回元素数组,如

const options = [
  <option selected>Open this select menu</option>,
  <option value="1">One</option>,
  <option value="2">Two</option>,
  <option value="3">Three</option>,
];

并用作

<Form>
  <select name="optionTypes">
      {options}
  </select>

SuleymanSah 4 年前

您可以创建一个可重用的Select组件,如下所示:

export default function Select({ name, options, handleSelected }) {
  return (
    <select name={name} onChange={e => handleSelected(e.target.value)}>
      {options.map(({ key, title }) => (
        <option key={key} value={key}>
          {title}
        </option>
      ))}
    </select>
  );
}

App.js

import React from "react";
import Select from "./Select";

const options = [
  {
    key: 1,
    title: "Option 1"
  },
  {
    key: 2,
    title: "Option 2"
  },
  {
    key: 3,
    title: "Option 3"
  }
];

export default function App() {
  const onSelected = option => {
    console.log(option);
  };

  return (
    <div>
      <form>
        <Select
          name="optionTypes"
          options={options}
          handleSelected={onSelected}
        />
      </form>
    </div>
  );
}

您还可以将选项放入文件中,并将其导入App.js。

例如: options.json

[
  {
    "key": 1,
    "title": "Option 1"
  },
  {
    "key": 2,
    "title": "Option 2"
  },
  {
    "key": 3,
    "title": "Option 3"
  }
]

App.js

import React from "react";
import Select from "./Select";
import options from './options.json';

export default function App() {
  const onSelected = option => {
    console.log(option);
  };

  return (
    <div>
      <form>
        <Select
          name="optionTypes"
          options={options}
          handleSelected={onSelected}
        />
      </form>
    </div>
  );
}

Codesandbox

如果你的选项字段键与键和标题不同,在传递选项之前,你可以使用Array.map()进行转换。