React выбрать передачу props для компонентов для использования - PullRequest
Новая
       2

React выбрать передачу props для компонентов для использования

0 голосов
/ 10 июля 2020
• 1000 * Получение props undefined 
const Option = useMemo(
    (props) => {
      return (
        <div>
          <components.Option {...props}>
            <checkbox checked={props.isSelected} onChange={() => null} />
            <label>{props.label}</Label>
          </components.Option>
        </div>
      );
    },
    [props]
  );




<Select components={{Option}} />

Пробовал этот подход, но все еще получаю props undefined 

<Select components={{Option: (optionProps) => <Option {...optionProps}/>}}

Все равно не повезло.

Добавлен воспроизводимый код здесь

1 Ответ

0 голосов
/ 10 июля 2020 
const Option = useMemo(
    () => {
      return (
        <div>
          <components.Option {...props}>
            <checkbox checked={props.isSelected} onChange={() => null} />
            <label>{props.label}</Label>
          </components.Option>
        </div>
      );
    },
    [props]
  );

Нет необходимости передавать какие-либо аргументы в useMemo() обратный вызов.

Попробуйте изменить (props) => на () => в useMemo обратном вызове.

Для вашего ссылка 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

обновить CustomSelect.js как показано ниже 


import React, { useMemo } from "react";
import Select, { components } from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const CustomSelect = props => {
const Option = useMemo(() => {
  return (
    <div>
      <components.Option {...props}>
        <checkbox checked={props.isSelected} onChange={() => null} />
        <label>{props.label}</label>
      </components.Option>
    </div>
  );
}, [props]);

const MultiValue = useMemo(() => {
  return (
    <components.MultiValue {...props}>
      <span>{props.label}</span>
    </components.MultiValue>
  );
}, [props]);

  return <Select options={options} isMulti components={(Option, MultiValue)} />
};

export default CustomSelect;
...