Почему дочерний компонент React.js не обновляет стили, полученные из реквизита? (стилизованная-компонента) - PullRequest
Новая
       20

Почему дочерний компонент React.js не обновляет стили, полученные из реквизита? (стилизованная-компонента)

0 голосов
/ 05 мая 2018

Я новичок в response.js и пытаюсь разобраться с условным стилем в зависимости от реквизита, передаваемого из родительских компонентов.

Я пытаюсь создать кнопку, в которой стилистические различия будут зависеть от того, является ли «отключенный» реквизит истинным или ложным. Если кнопка отключена (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>
        )
    }
}

Кто-нибудь знает, почему?

1 Ответ

0 голосов
/ 05 мая 2018

В родительском компоненте вам нужно изменить disabled на логическое значение вместо строки. 

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

Или, если вам нужно использовать ее как строку, вам нужно указать условное 

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