React typescript 將值從滑塊傳遞到樣式組件

Question

我這里有一個演示

它是一個帶有打字稿的簡單反應應用程序。

我有一個使用 useState 輸出值的滑塊

我需要在樣式組件中使用此值

因此，隨着滑塊移動，div 的高度將發生變化。

我沒有在代碼中收到錯誤，但它只是不起作用。

誰能看到我做錯了什么。

import React, { useState } from 'react';
import { render } from 'react-dom';
import './style.css';
import styled, { css } from 'styled-components';

const App = () => {
  const [value, setvalue] = useState<number>(300);

  const handelValue = (e: any) => {
    setvalue(e.target.value);
  };

  const Block = styled.div`
    background: red;
    width: 200px;
    //height: 200px;
    ${props =>
      props.value &&
      css`
        height: ${props.value};
      `}
  `;

  return (
    <div>
      <div>
        <input type="range" min="300" max="700" onChange={handelValue} />
      </div>
      {value}
      <Block {...value} />
    </div>
  );
};

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

Answer 1

這是因為當您{...value}您正在傳播一個數字，您應該將value屬性傳遞給<Block /> 。

此外，您可以在React Developer Tools中檢查沒有屬性傳遞給樣式化 div。

固定版本將是

<Block value={value} />