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

Question

I have a page in React called Anish that renders a Dropdown component:

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

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

export default Anish;

Here is the Dropdown component:

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>
    );
  }
}

So how am I able to customize the options for the <Dropdown /> in other pages? Can I do something like <Dropdown options={['Volvo', 'Subaru']} /> ?

I think I'm supposed to define props somewhere, but I am new to all this. Thank you for the help,

Answer 1

Yes you can pass the options in as a prop and do this.props.options inside of the child component or if you want to customize the way the options look, you can pass in an array of elements that you can map out in the Dropdown class.

You would change:

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

Answer 2

Any items you pass as attributes to your JSX components will get passed as part of the props object in the component ( props is present on the context of the component, ie this ):

<Dropdown options={['Volvo', 'Subaru']} />
//        ^-- this means props objects will look like { options: ['Volvo', 'Subaru'] }

Which means you should read the options from this.props :

export default class Dropdown extends React.Component {

  // ...

  render() {

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

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

As a side not, if you use a plain function ( presentational component ) rather than a class, props are passed as the first argument to the function:

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>
  );
}