React.js子组件没有更新从props派生的样式，为什么？ （样式组件）

Question

我是react.js的新手，我正试图根据从父组件传递的道具来了解条件样式。

我试图制作一个具有造型差异的按钮，具体取决于是否已禁用＆＃39;道具是真是假。如果按钮被禁用（true），它应该显示为灰色，否则，它会显示为蓝色。

这是我到目前为止的代码，虽然它不起作用，但我不确定原因。

父组件

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Welcome } from '@storybook/react/demo';
// Buttons
import Primary from '../components/ButtonPrimary'

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Buttons')
    .add('Primary', () => <Primary label="Default" disabled="false"></Primary>)

子组件

import React from "react";
import styled from 'styled-components';

const Button = styled.button`
    background-color: ${props => props.disabled ? '#EDEDED' : '#0076C0'};
    border: ${props => props.disabled ? '1px solid #DADADA' : 'none'};    
    color: ${props => props.disabled ? '#818181' : '#FFFFFF'};
    cursor: ${props => props.disabled ? 'unset' : 'pointer'};
    border-radius: 2px;
    font-family: Roboto-Regular;
    font-size: 16px;
    padding: 6px 32px;
    font-family: roboto, helvetica, sans-serif;
    font-size: 18px;

    &:focus {
        outline: none;
    }

    &:hover {
        box-shadow: ${props => props.disabled ? 'unset' : '0px 1px 2px 1px #b3b3b3'};
    }

    &:active {
        box-shadow: ${props => props.disabled ? 'unset' : 'inset 0 0 10px #2f2f2f80'};
    }
`;

export default class ButtonPrimary extends React.Component {
    render() {
        return (
            <div>
                <Button disabled={this.props.disabled}>{this.props.label}</Button>
            </div>
        )
    }
}

有谁知道为什么？

Answer 1

在您的父组件中，您需要将disabled更改为布尔值而不是字符串。

storiesOf('Buttons')
    .add('Primary', () => <Primary label="Default" disabled={false} ></Primary>)

如果您需要将其用作字符串，则需要指定条件

${props => props.disabled === 'true' ? '#EDEDED' : '#0076C0'};