Как создавать специализированные компоненты в React - PullRequest
Новая
       21

Как создавать специализированные компоненты в React

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

Я обнаружил, что пишу код, подобный этому, для группы компонентов, которые имеют некоторую общность: 

class PropertyBlock extends React.Component {
    render() {
        const { headtext, blockType, selectedId, selectOptions, onChange, extratext } = this.props
        return (
            <div className='propblk'>
                <div className='headline'>{headtext}</div>
                {blockType == 'dropdown' ? <PropBlk_Dropdown selectOptions={selectOptions} selectedId={selectedId} onChange={onChange} />
                    :
                    blockType == 'inp_line' ? <PropBlk_InputLine value={selectedId} onChange={onChange} />
                        :
                        blockType == 'inpstory' ? <PropBlk_InputStory value={selectedId} onChange={onChange} extratext={extratext} />
                            :
                            blockType == 'showline' ? <PropBlk_ShowLine value={selectedId} lines={selectOptions} />
                                :
                                blockType == 'inp_date' ? <PropBlk_InputDate value={selectedId} onChange={onChange} />
                                    :
                                    blockType == 'inp__chk' ? <PropBlk_Checkbox value={selectedId} onChange={onChange} extratext={extratext} />
                                        :
                                        <div>
                                            {selectedId}
                                        </div>

                }
            </div>
        )
    }
}

Но почему-то я думал, что может быть лучше. Я думал о компоненте parent и множестве специализированных компонентов child, которые наследуются от этого родителя. как: 

class PropBlk_Type1 extends PropertyParentBlock {
   ...
}

Однако, читая В React , кажется, что следует избегать наследования. Итак, я попробовал что-то в соответствии с примером React, как это: 

class PropertyParentBlock extends React.Component {
    render() {
        const { headtext, myownhtml } = this.props
        return (
            <div className='propblk'>
                <div className='headline'>{headtext}</div>
                {myownhtml}
            </div>
        )
    }
}

class PropBlk_Type1 extends React.Component {
    render() {
        const { headtext, value, onChange, extratext } = this.props
        return (
            <PropertyParentBlock headtext={headtext}
                myownhtml={(
                    <div>
                        <input value={value} onChange={(e) => onChange(e.target.value)} />
                    </div>
                )}
            />
        )
    }
}

Таким образом, специализированный html загружается в родительский компонент как свойство myhtml. Создание этого с помощью WebPack не дало никаких синтаксических ошибок, и на самом деле выполнение этого создает желаемый HTML, и это, кажется, работает.

Поскольку я все еще изучаю React, мне интересно, нахожусь ли я на правильном пути, или что есть лучшие способы и лучшие практики для такого рода наследования или композиции.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Нет необходимости вкладывать троичные операторы, как у вас, вы можете сделать: 

class PropertyBlock extends React.Component {
    render() {
        const { headtext, blockType, selectedId, selectOptions, onChange, extratext } = this.props;
        let element;
        switch(blockType){
           case "dropdown" : 
               element =  <PropBlk_Dropdown selectOptions={selectOptions} selectedId={selectedId} onChange={onChange} />;
                 break;
            // go on here ...
        }
        return (
            <div className='propblk'>
                <div className='headline'>{headtext}</div>
                {element}
            </div>
        )
    }
}
0 голосов
/ 06 апреля 2019

Внимательно прочитав документацию по React, я обнаружил, что на правильном пути.Только мой пример можно упростить, если оставить одну пару скобок и использовать специальный props.children.

. Я мог бы переписать уродливый код вопроса в нечто вроде этого «родительского» компонента: 

class PropBlk_Frame extends React.Component {
    render() {
        const { headtext } = this.props
        return (
            <div className='propblk'>
                <div className='headline'>{headtext}</div>
                {this.props.children}
            </div>
        )
    }
}

Вышеуказанный компонент используется в ряде дочерних компонентов, например: 

class PropBlk_InputLine extends React.Component {
    render() {
        const { headtext, value, inputfield, onChange } = this.props
        return (
            <PropBlk_Frame headtext={headtext}>
                <input value={value} onChange={(e) => onChange(true, e.target.value, inputfield)} onBlur={() => onChange(false, null, inputfield)} />
            </PropBlk_Frame>
        )
    }
}

class PropBlk_InputDate extends React.Component {
    render() {
        const { headtext, value, inputfield, onChange } = this.props
        return (
            <PropBlk_Frame headtext={headtext}>
                <input type='date' value={value} onChange={(e) => onChange(true, e.target.value, inputfield)} onBlur={() => onChange(false, null, inputfield)} />
            </PropBlk_Frame>
        )
    }
}

Теперь я могу создать свою веб-страницу с помощью специализированных компонентов, таких как: 

<PropBlk_InputLine headtext='Projectnaam *' value={fields.ProjectNaam} inputfield='inp_projectnaam' onChange={this.onInput} />
<PropBlk_InputDate headtext='Opdrachtdatum *' value={fields.DatumLabOpdracht} inputfield='inp_opdrachtdatum' onChange={this.onInput} />

Этот подход устраняет структуру с троичными, поэтому сохраняет строки кода и является более понятным.

...