Javascript 如何在React应用程序中外部化选择选项？

我有一个React Redux应用程序，它有各种选择框。现在我把它硬编码在js文件中。 我需要以下页面：编辑配置文件，查看配置文件，搜索选择。。 我认为在每一页中都有这么长的列表是没有意义的

如何将这些选项外部化-我想将其存储在单个JS文件中，并仅在需要时使用这些选项

请注意，我的问题不是如何创建选择组件。我已经在下面做了。问题是如何从外部来源提取列表

我的代码示例是：

import React from 'react'
import PropTypes from 'prop-types'
import Select from '../others/input/select'

const InputCasteChristian = ({ value, change }) => (
  <div className="edit_caste_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('caste', e)}
      className="edit_caste mb-2"
    >
      <option value="" disabled selected>
        Select Caste
      </option>
      <option>Anglo-Indian</option>
      <option>Born Again</option>
      <option>Brethren</option>
      <option>CSI</option>

      <option>Unspecified</option>
    </Select>
  </div>
)

InputCasteChristian.propTypes = {
  value: PropTypes.string.isRequired,
  change: PropTypes.func.isRequired,
}

export default InputCasteChristian

更新

import ReligionInput from './religion-input'
...
...
    return (
      <div>
        <Title
          value="Edit profile"
..
...
    <div className="profile_right">
       ....
    <ReligionInput value={religion} change={this.change} />
...
...
..

const mapStateToProps = store => ({
  ud: store.User.user_details,
  tags: store.User.tags,
  session: store.User.session,
})

export default connect(mapStateToProps)(EditProfile)
export { EditProfile as PureEditProfile }

---

您应该能够以数组的形式传递选项，并且这个组件不需要知道如何创建这个列表，您只需在这里传递它。 使用映射功能，您可以创建选项列表

import React from 'react'
import PropTypes from 'prop-types'
import Select from '../others/input/select'

const InputCasteChristian = ({ value, change, options }) => (
    <div className="edit_caste_div">
        <Select
            placeholder="Select option"
            value={value}
            valueChange={e => change('caste', e)}
            className="edit_caste mb-2"
        >
            {options.map((a, index) => {
                return (
                    <option key={index}>{a}</option>
                );
            })}
        </Select>
    </div>
)

InputCasteChristian.propTypes = {
    value: PropTypes.string.isRequired,
    change: PropTypes.func.isRequired,
}

export default InputCasteChristian

这是调用者组件，请参见如何填充选项：

import React, { Component } from 'react';
import InputCasteChristian from './InputCasteChristian';
import { connect } from 'react-redux';

class InputCasteChristianCaller extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            options: props.options
        };
    }
    render() {
        return (
            <InputCasteChristian
                value={this.state.value}
                change={() => { }}
                options={this.state.options} />
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        options: state.options
    };
}

function mapDispatchToProps(dispatch) {
    return {
        dispatch: dispatch
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(InputCasteChristianCaller);

---

我在构造函数中创建了一个数组对象，您可以像我一样创建这个列表，也可以从ajax调用中获得它，…。

有道理，但我看不到您的答案中传递了选项。应该将其存储为json文件吗？它是从哪里进口的？另外，在视图页面中显示数据库中的值为0、1、2等的选项如何。。。如何将其转换为上面的值？constinputcastechristian={value，change，options}=>参见此行？传递选项数组就像传递更改函数或值对象一样。你能分享调用这个组件的代码吗？谢谢。我已经添加了调用此组件的相关代码。我看到你在传递选项，但我想知道选项列表是从哪里来的。。我的意思是更新答案中的项目很好。谢谢你的更新。我将从许多组件调用它。如何避免将这些选项数组添加到每个组件？我认为选项列表应该在一个地方，而不是3个来电者，如果我从3个地方打电话。你同意吗？