如何在不使用第三方库的情况下通过 React 更改多个样式元素？

Question

Given that we have a tag as such:

<video style={{ background: "blue", width: "111px", height: "111px" }} />

It is easy to manipulate one element such as width like this:

<video style={{ background: "blue", width: state ? '100px' : '200px', height: "111px" }} />

However if I want to change both of them upon changing the state I have to copy it over as such:

<video style={{ background: "blue", width: state ? '100px' : '200px', height: state ? '100px' : '200px' }} />

And I suspect this is not the way to go.

How to change multiple style elements without repeating myself over and over again?

Answer 1

Are you using CSS directly?

If you're, consider doing something like this with class

// CSS in a index.css file
.has-state {
 height: 100px;
 width: 100px;
}

.no-state {
  height: 200px;
  width: 200px;
}

.has-state, .no-state {
  background: "blue"
}

// in the React file e.g. index.ts
import * as React from "react";
import "./index.css";

const Component = () => (
  <video className={state ? "has-state" : "no-state"} />
)

Answer 2

Put the logic above the jsx:

const stateStyles = state 
  ? {
      width: '100px',
      height: '100px',
      border: '2px solid black'
    } 
  : {
      width: '200px',
      height: '200px'        
    };

return (
  <video style={{ background: "blue", ...stateStyles }} />
)