javascript - React.js 子组件不更新从 props 派生的样式，为什么？ (样式组件)

Question

我是 react.js 的新手，我正在尝试根据从父组件传递下来的 Prop 来了解条件样式。

我正在尝试制作一个具有样式差异的按钮，具体取决于“已禁用” Prop 是真还是假。如果按钮被禁用 (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 更改为 bool 值而不是字符串。

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

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

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