反应打字稿将值从滑块传递到样式组件答案

【问题标题】：React typescript pass value from slider to styled-component反应打字稿将值从滑块传递到样式组件
【发布时间】：2021-09-19 14:32:37
【问题描述】：

我有一个演示 here

它是一个带有 typescript 的简单反应应用程序。

我有一个使用 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'));

【问题讨论】：

是的。你已经传播了标量值。正确的表达方式：<Block value={value} />

标签： reactjs typescript styled-components

【解决方案1】：

这是因为当您{...value} 时，您正在传播一个数字，您应该将value 属性传递给<Block />。

此外，您可以在React Developer Tools 中检查没有属性传递给样式化的 div。

固定版本是

<Block value={value} />

【讨论】：