Question

我需要限制在“反应选择”下拉菜单中显示的可见选项的数量。

目前它显示大约9个项目，但我需要限制为5个。我不确定如何对下拉菜单进行更改。

Answer 1

您使用这个react-dropdown库https://www.npmjs.com/package/react-dropdown-select吗？

此库具有选项属性。用户可以选择哪些选项。对于这个答案。您可以在以下选项中放入5个项目。

const options = [
  {key: '1', value: 'first'},
  {key: '2', value: 'two'},
  {key: '3', value: 'three'},
  {key: '4', value: 'four'},
  {key: '5', value: 'five'}
];

<react-dropdown-selecte options={options} />

Answer 2

我通过覆盖核心组件样式来解决这个问题。只是找到哪个组件呈现了我感兴趣的样式的一种情况。

在这种情况下，add_filter( 'woocommerce_available_payment_gateways', 'bbloomer_unset_gateway_by_category' ); function bbloomer_unset_gateway_by_category( $available_gateways ) { if ( is_admin() ) return $available_gateways; if ( ! is_checkout() ) return $available_gateways; $unset = false; $category_ids = array( 8, 37 ); foreach ( WC()->cart->get_cart_contents() as $key => $values ) { $terms = get_the_terms( $values['product_id'], 'product_cat' ); foreach ( $terms as $term ) { if ( in_array( $term->term_id, $category_ids ) ) { $unset = true; break; } } } if ( $unset == true ) unset( $available_gateways['cheque'] ); return $available_gateways; }组件控制着下拉菜单中的可见项。要覆盖组件样式，这就是我所使用的：

menuList

我发现const selectStyles = { menuList: styles => { console.log('menuList:', styles); return { ...styles, maxHeight: 136 }; } }; return ( <Select value={selectVal} onChange={updateVal} options={options} styles={selectStyles} /> );找出组件样式非常有用，以查看特定组件可用的样式以及所使用的默认值。

限制下拉菜单中的可见项目数

2 个答案: