Javascript 如何在中为React中的select元素自定义选项？

我在React中有一个名为Anish的页面，它呈现一个下拉组件：

import React from 'react';
import Dropdown from 'components/Dropdown';

class Anish extends React.Component {
  render() {
    return (
      <Dropdown />
    );
  }
}

export default Anish;

import React from 'react';
import '../../styles/dropdown.scss';

const options = [
  'Select an Option',
  'First Option',
  'Second Option',
  'Third Option',
];

export default class Dropdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: 'Select an Option' };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const dropdownOptions = options.map((option) =>
      <option value={option} key={option} >{option}</option>,
    );

    return (
      <select
        value={this.state.value}
        onChange={this.onChange}
        styleName="dropdown"
      >
        { dropdownOptions }
      </select>
    );
  }
}

从“React”导入React；
从“组件/下拉列表”导入下拉列表；
类Anish扩展了React.Component{
render（）{
返回(
);
}
}
出口安尼士；

下面是下拉组件：

import React from 'react';
import Dropdown from 'components/Dropdown';

class Anish extends React.Component {
  render() {
    return (
      <Dropdown />
    );
  }
}

export default Anish;

import React from 'react';
import '../../styles/dropdown.scss';

const options = [
  'Select an Option',
  'First Option',
  'Second Option',
  'Third Option',
];

export default class Dropdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: 'Select an Option' };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({
      value: e.target.value,
    });
  }

  render() {
    const dropdownOptions = options.map((option) =>
      <option value={option} key={option} >{option}</option>,
    );

    return (
      <select
        value={this.state.value}
        onChange={this.onChange}
        styleName="dropdown"
      >
        { dropdownOptions }
      </select>
    );
  }
}

从“React”导入React；
导入“../styles/dropdown.scss”；
常量选项=[
“选择一个选项”，
“第一选择”，
“第二种选择”，
“第三种选择”，
];
导出默认类下拉列表扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:'选择一个选项'}；
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
这是我的国家({
价值：即目标价值，
});
}
render（）{
const dropdownpoptions=options.map（（option）=>
{option}，
);
返回(
{dropdownpoptions}
);
}
}

那么，如何在其他页面中自定义

的选项呢？我可以做类似于

的事情吗

---

我想我应该在某个地方定义道具，但我对这一切都是新手。感谢您的帮助，

您作为属性传递给JSX组件的任何项目都将作为组件中对象的一部分传递（

道具

出现在组件的上下文中，即

此

）：

另一方面，如果使用普通函数（）而不是类，

props

作为第一个参数传递给函数：

export default function Dropdown(props) {
  //                             ^ props passed here

  // use props.options
  const dropdownOptions = props.options.map((option) =>
    <option value={option} key={option} >{option}</option>,
  );

  return (
    <select
      value={this.state.value}
      onChange={this.onChange}
      styleName="dropdown"
    >
      { dropdownOptions }
    </select>
  );
}

导出默认功能下拉列表（道具）{
//^道具从这里经过
//使用道具
const dropdownpoptions=props.options.map（（选项）=>
{option}，
);
返回(
{dropdownpoptions}
);
}

是，您可以将选项作为道具传入，并在子组件内执行此操作。道具。选项，或者如果您想自定义选项的外观，您可以传入一组元素，这些元素可以在下拉类中映射出来

你会改变：

const-dropdownpoptions=this.props.options.map（（选项）=>
{option}，
);

您必须在

{}

中将传递到JSX元素中的JS表达式包装起来，因此

编辑了这个问题，谢谢！您需要更新

下拉列表

以将

选项

作为属性，并在构建

下拉选项时使用
此.props.options
（而不仅仅是
选项
常量）