Логика для простого случая переключения в React - PullRequest
Новая
       18

Логика для простого случая переключения в React

0 голосов
/ 02 апреля 2019

Мне нужно изменить компонент, который отображается в зависимости от значения флага.0 равно нулю, но 1 и 2 сгенерируют один и тот же компонент, но с другим настраиваемым сообщением.

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

switch (flagValue) {
            case 1: 
                console.log('1')
                break;
            case 2:
                console.log('2 or 5')
                break;
            default:
                break;
        }

Я могу быть далеко от базы здесь ^^

Это код, для которого я пытаюсь переключить регистр.Содержание компонента <AlertBox> будет меняться в зависимости от case:1 или case:2

if (flagValue !== 0) {
            return null;
        } else
            return (
                <AlertBox
                    title={`Your ${
                        this.props.Year
                    } Payment Has Not Been Processed`}
                    content={
                        <span>
                            custom text here
                            <b>
                                {` ${this.props.month}`} 15,{' '}
                                {`${this.props.currentYear}`}{' '}
                            </b>
                        </span>
                    }
                    headerLevel={2}
                />
            );

Ответы [ 3 ]

0 голосов
/ 02 апреля 2019

если вам явно нужны значения 1 и 2, вы можете использовать простой условный рендеринг.Обратите внимание, что это, вероятно, становится довольно уродливым, когда вы добавляете больше случаев. 

return (
    <AlertBox
        title={`Your ${
            this.props.Year
            } Payment Has Not Been Processed`}
        content={
            <span>
                {flagValue === 1 && 'Custom Message 1'}
                {flagValue === 2 && 'Custom Message 2'}
                <b>
                    {` ${this.props.month}`} 15,{' '}
                    {`${this.props.currentYear}`}{' '}
                </b>
            </span>
        }
        headerLevel={2}
    />
);
0 голосов
/ 02 апреля 2019

Вы проверяли, что flagValue это число вместо строки?Операторы Switch используют строгое равенство ===.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

0 голосов
/ 02 апреля 2019

Просто напишите функцию, которая динамически возвращает выбранный компонент: 

state ={
    selected : 0,
}

clickHandler = () => this.setState({selected : Math.random(0,numOfcomponents)})     

getSelectedComponent = () =>{
    switch(this.state.selected){
        case 0 : return (<div>0</div>)
        /*..... all possible values*/

        default : return (<div>default</div>)
    }
}

render(){
    <div onClick={this.clickHandler}>{this.getSelectedComponent()}</div>
}

Теперь каждый раз, когда пользователь нажимает на div, выбирается другой случайный компонент, просто реализуйте свою логику, чтобы переключаться между

...