Наличие свойства css в переменной в перехватчиках реакции - PullRequest
Новая
       11

Наличие свойства css в переменной в перехватчиках реакции

1 голос
/ 08 июля 2020

Мне нужно удалить некоторые свойства элемента html и добавить дополнительное свойство, основанное на каком-то событии. Я пытаюсь добиться этого, создав одну объектную переменную для требуемых свойств css и пытаюсь изменить ее во время выполнения, присвоив новое значение объекта переменной css.

Вот пример кода: 

const MyCssVariableSample = (props) => {
  const [testCssVariable, setTestCssVariable] = useState({
    height: "100%",
    width: "100%",
    color: "purple",
  });

  return (
    <div>
      <h1>Welcome</h1>
      <button
        onClick={() => {
          setTestCssVariable({
            position: "absolute",
            bottom: "0",
            right: "0",
            color: "purple",
          }),
        }}
      >Hello there</button>
      <div className="xyz">
        <video id="abc" style={testCssVariable} />
      </div>
    </div>
  );
};

, но я не могу этого сделать, поскольку код позволяет мне изменять значение определенных ключей, но не вводить ключи, поэтому в этом случае, если я хочу изменить высоту, ширину или цвет, тогда он в порядке, но я не могу ввести положение, поле или другие новые ключи.

Это ошибка:

Аргумент типа '{position: string; внизу: строка; справа: строка; цвет: строка; } 'не может быть назначен параметру типа' SetStateAction <{height: string; ширина: строка; цвет: строка; "цвет фона": строка; позиция: строка; внизу: строка; справа: строка; }> '. Тип '{позиция: строка; внизу: строка; справа: строка; цвет: строка; } 'отсутствуют следующие свойства из типа' {height: string; ширина: строка; цвет: строка; "цвет фона": строка; позиция: строка; внизу: строка; справа: строка; } ': height, width, "background-color"

Как я могу добиться того же? Я совсем новичок, чтобы реагировать и ловить.

1 Ответ

1 голос
/ 08 июля 2020

У вас здесь опечатка, 

        onClick={() => {
          setTestCssVariable({
            position: "absolute",
            bottom: "0",
            right: "0",
            color: "purple",
          }), // <- ','
        }}

За исключением этого, Все работает, и позиция применяется в моем тесте, Проверьте еще раз после исправления опечатки

...