如何在React App中外部化选择选项?

时间:2018-08-19 03:49:46

标签: javascript reactjs

我有一个带有各种选择框的React Redux应用程序。现在,我已经在js文件中进行了硬编码。 以下页面需要这些:编辑配置文件,查看配置文件,搜索选择。 我认为在每页中都包含这么长的列表是没有道理的。

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

请注意,我的问题不是如何创建选择组件。我已经在下面做了。问题是如何从外部来源提取dfs = [ df1.assign(class_=np.where(df1['class_'].eq(i), 1, -1)) for i in df1['class_'].unique() ] 列表。

我的代码示例是:

for d in dfs:
    print(d, end='\n\n')

   class_ colB colC
0       1   1b   1c
1      -1   2b   2c
2      -1   3b   3c
3       1   4b   4c
4      -1   5b   5c

   class_ colB colC
0      -1   1b   1c
1       1   2b   2c
2      -1   3b   3c
3      -1   4b   4c
4       1   5b   5c

   class_ colB colC
0      -1   1b   1c
1      -1   2b   2c
2       1   3b   3c
3      -1   4b   4c
4      -1   5b   5c

更新

<option>

1 个答案:

答案 0 :(得分:1)

您应该能够将选项作为数组传递,并且该组件不需要知道如何创建此列表,只需在此处传递即可。 并使用地图功能,您可以创建选项列表。

autoplot(cbind(train, test), facet = NULL)

这是调用方组件,请参阅我如何填充选项:

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

我在构造函数中创建一个数组对象,您可以像我一样创建此列表,也可以从ajax调用...中获取它。