如何使用 react 和 typescript 根据条件向样式化组件添加背景颜色？答案

【问题标题】：How to add a background color to a styled component based on condition using react and typescript?如何使用 react 和 typescript 根据条件向样式化组件添加背景颜色？
【发布时间】：2020-09-20 16:42:42
【问题描述】：

如何使用 react 和 typescript 根据条件为样式化组件添加背景颜色？

我想做什么？

我有一个 MainComponent，它在 DragAndDropComponent 中呈现 ListContent。

现在，当用户将文件拖入 DragAndDrop div 时，我希望其背景颜色变为灰色。

下面是我的代码，

function MainComponent () {
return (
    <Wrapper>
        <SomeOtheComponent/>
        <DragAndDrop>
            <ListContent> //this is the children for the DragAndDrop component and want this to 
                //render within DragAndDrop component
                {condition_true && (
                    <FirstList/>
                )}
                {condition_true && (
                    <SecondList/>
                )}
            </ListContent>
        </Wrapper>
    );
}


const DragAndDrop: React.FC = ({ children }) => { //here i am passing children
    const [dragging, setDragging] = useState(false);
    const [dragCounter, setDragCounter] = useState(0);

    React.useEffect(() => {
        // componentDidMount()
        setDragCounter(0);
    }, []);

    const handleDrag = (e: any) => {
        e.preventDefault();
        e.stopPropagation();
    };

    const handleDragIn = (e: any) => {
        e.preventDefault();
        e.stopPropagation();
        setDragCounter((prev: number) => prev + 1);
        if (e.dataTransfer.files) {
            setDragging(true);
        }
    };

    const handleDragOut = (e: any) => {
        e.preventDefault();
        e.stopPropagation();
        setDragCounter((prev: number) => prev - 1);
        if (dragCounter === 0) {
            setDragging(false);
        }
    }; 

    const handleDrop = (e: any) => {
        e.preventDefault();
        e.stopPropagation();
        setDragging(false);
        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            e.dataTransfer.clearData();
            setDragCounter(0);
        }
    };

    return (
        <DropZone //i want to change background color to this div if dragging true.
            ref={dropRef}
            onDragEnter={handleDragIn}
            onDragLeave={handleDragOut}
            onDragOver={handleDrag}
            onDrop={handleDrop}
        >  
            {children}
        </DropZone>
    );
};


const DropZone = styled.div`
    height: 100%;
    //backgroun-color: how to change background color to grey if dragging state true.
`;

有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

使用传递props 对象的函数。在这里我已经解构了dragging，如果真的返回background: grey 规则，否则它不返回任何规则。

passed props

const DropZone = styled.div`
  height: 100%;
  ${({ dragging }) => dragging && 'background-color:  grey;'}
`;

编辑：为打字稿添加 dragging 道具类型 (<{ dragging?: boolean }>)

const DropZone = styled.div<{ dragging?: boolean }>`
  height: 100%;
  ${({ dragging }) => dragging && 'background-color:  grey;'}
`;

用法

<DropZone
  ref={dropRef}
  dragging={dragging} // <-- pass dragging as prop here
  onDragEnter={handleDragIn}
  onDragLeave={handleDragOut}
  onDragOver={handleDrag}
  onDrop={handleDrop}
>  
  {children}
</DropZone>

【讨论】：

感谢 dropzone 是一个样式化的组件 div，并且将拖动 ={dragging} 传递给它表示属性拖动在类型 intrinsicAttributes 上不存在。似乎在 const DropZone 中使用拖动的方式存在一些错字。缺少右大括号
@someuser2491 是的，那是打字稿问题。感谢您对错字的提醒，我在文本编辑器中编码得到了什么；现在修好了。我对打字稿不是很熟悉，但我猜你需要做相当于将dragging 添加到定义的propTypes。 styled-components typescript docs 有什么帮助吗？也许特别是this？
啊，好吧。我像这样修复了它 const DropZone = styled.div` 现在它可以工作了。谢谢。
@someuser2491 太棒了，太棒了！

【解决方案2】：

尝试将此语句向上移动 const [dragging, setDragging] = useState(false); 以使其可在外部访问

const DropZone = styled.div`
    height: 100%;
    background: ${ dragging ? "grey": ""}
`;

【讨论】：

谢谢。我试过这个并说找不到名称拖动。
Idk什么是状态变量的名称把你的变量名放在那里
尝试将此语句向上移动 const [dragging, setDragging] = useState(false);使其可以在外部访问