Question

export enum SizeEnum {
    Small,
    Large
}

export interface ICheckbox {
    Size: SizeEnum;
}

const Box = styled.div`
    height: 20px;
    width: 20px;
`

在上面的代码中，我希望能够根据道具有条件地更改<Box>的高度和宽度值。我该怎么做呢？

Answer 1

如果要添加多个CSS样式，则可以使用另一种方法。

const Box = styled.div`
    height:100px;
    width:100px;
    ${props => props.Size === 'Small' && css`
         height:20px;
         width:20px;
    `}
`

Answer 2

有关详细信息，请参阅Logical Operators和Adapting based on props。

<?php
    $conn = new mysqli("127.0.0.1", "root", "", "db");

    if(isset($_POST['submit'])) {
        $null1 = NULL;
        $null2 = NULL;
        $null3 = NULL;
        $null4 = NULL;
        $title = isset($_POST['title']) ? $_POST['title'] : '';
        $email = isset($_POST['email']) ? $_POST['email'] : '';

        $stmt = $conn->prepare("INSERT INTO Posts (Image_1, Image_2, Image_3, Image_4, title, email ) VALUES (?,?,?,?,?,?);");
        $stmt->bind_param("bbbbss", $null1, $null2, $null3, $null4, $title, $email );

        for($i = 0; $i < count( $_FILES['images1']['tmp_name'] ); $i++) {
            if(!empty($_FILES['images1']['tmp_name'][$i])) {
                $target_file = $_FILES['images1']['tmp_name'][$i];

                $fp = fopen($target_file, "r");
                while (!feof($fp)) {
                    $stmt->send_long_data($i, fread($fp, 8192));
                }
                fclose($fp);
                unlink($_FILES['images1']['tmp_name'][$i]);
                echo "Uploading image blob success!<br/>\n";
            }
        }

        $stmt->execute();
        $stmt->close();
        $conn->close();
    }
?>

<form action="" method="post" enctype="multipart/form-data">
 <input type="text" name="title" value="this is the title"/><br/>
 <input type="text" name="email" value="john@yahoo.com"/><br/>
 <input type="file" name="images1[]" value=""/><br/>
 <input type="file" name="images1[]" value=""/><br/>
 <input type="file" name="images1[]" value=""/><br/>
 <input type="file" name="images1[]" value=""/><br/><br/>
 <input type="submit" name="submit" value="Upload Data"/>
</form>

Answer 3

您可以使用三元运算符

const Box = styled.div`
height: ${props => props.Size === 'Small' ? '20px' : '40px'}
width: ${props => props.Size === 'Small' ? '20px' : '40px'}
`

参考：https://www.styled-components.com/docs/basics

Answer 4

我们可以像jsx

一样添加if-checks

const Box = styled.div`
    height:100px;
    width:100px;
    ${props => props.Size === 'Small' && `
         height:20px;
         width:20px;
    `}
`

注意：无需包含单词css

Answer 5

您可以在以下情况下使用 elvis运算符：

${(props) => props.someValue ? css` width: 20px;` : css` width: 100px; `}

希望这可以帮助人们研究如何在反应式组件中使用逻辑运算符。

如果语句在样式组件内

5 个答案: