Question

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

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

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

export default Anish;

以下是Dropdown组件：

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

那么我如何在其他页面中自定义<Dropdown />的选项？我可以做<Dropdown options={['Volvo', 'Subaru']} />之类的事情吗？

我想我应该在某个地方定义道具，但我对这一切都不熟悉。谢谢你的帮助，

Answer 1

是的，您可以将选项作为prop传递，并在子组件内执行this.props.options，或者如果要自定义选项的外观，可以传入可以映射出来的元素数组在Dropdown课程中。

你会改变：

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

Answer 2

作为属性传递给JSX组件的任何项都将作为组件中props对象的一部分传递（props出现在组件的上下文中，即this ）：

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

这意味着您应该阅读options中的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>
  );
}

另一方面，如果你使用普通函数（presentational component）而不是类，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>
  );
}

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

2 个答案: