Question

如何为下拉菜单中的每个项目渲染多行。例如：对于下拉列表中的每个项目，我需要在第一行和城市中显示address1，在第二行中显示州。 \ n和\ br不起作用。任何帮助将不胜感激。

React.render(
    <Dropdown label="Dropdown Label">
      <DropdownItem label="1 main street \n  sacramento, california" value="Number 1" />
      <DropdownItem label="2 main street \n  stockton, california" value="2" />
    </Dropdown>,
  document.getElementById('app')
);

Answer 1

您可以使用JavaScript的Map函数。您可以将城市名称作为数组，并将其位置索引作为键，并将城市名称作为值。可以在React documentation中找到更多信息，并可以在here中看到一个示例。下面的示例：

  function Filter(props){
  const Items = ['All', 'Car', 'Truck', 'Convetible'];
  const MappingItems = Items.map((Item) => <option>{Item}</option> );
  return (
    <div style={divStyle}>
      New Only <input type="checkbox" /><br /><br />
      Select Type <select>
        {MappingItems}
      </select>
    </div>
  )
}

ReactDOM.render(
  <Filter />,
  document.getElementById('root')
);

希望这会有所帮助！

Answer 2

如果您具有如下所示的下拉列表：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

在大多数情况下，此下拉列表是动态的，最好将其保留在数组中，然后使用javascript高阶函数在其上进行映射

const optionsList = [
   {
      name: 'Volvo',
      value: 'volvo',
   },
   {
     name: 'Saab',
     value: 'saab',
   },
  // And the no of drop down items could be dynamic
];

// Now in your render method
React.render(
    <select onChange={onChangeFunction}>
    {optionsList.map(option => (
      <option value={option.value} key={option.name}>{option.name}</option>
    ))}
    </select>,
  document.getElementById('app')
);

// In this way your dropdown will appear as a dropdown list on the newline without using breaks or newlines

P.S。映射选项时不要忘记错过键。 React会谢谢你;）

现在，您可以通过提供自己选择的样式来灵活地选择自定义组件。

Answer 3

根据您的要求，转到这里：

import React from "react";
import ReactDOM from "react-dom";
const DropdownItem = props => {
  return (
    <option label={props.value} value={props.label}>
      {props.value}
    </option>
  );
};

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
  }

  handleChange = e => {
    this.setState({ value: String(e.target.value) });
  };
  render() {
    return (
      <>
        <select value={this.state.value} onChange={this.handleChange}>
          {this.props.children.map(DropdownItem => {
            return DropdownItem;
          })}
        </select>
        <div>
          {this.state.value.split("\\n").map((item, i) => {
            return <p key={i}>{item}</p>;
          })}
        </div>
      </>
    );
  }
}

ReactDOM.render(
  <Dropdown label="Dropdown Label">
    <DropdownItem
      label="1 main street \n sacramento, california"
      value="Number 1"
    />
    <DropdownItem
      label="2 main street \n stockton, california"
      value="Number 2"
    />
  </Dropdown>,
  document.getElementById("app")
);

https://codesandbox.io/s/react-hooks-counter-demo-vjocy

在React中为每个项目下拉菜单渲染多行

3 个答案: