如何在 React 中构建专用组件

Question

我发现自己编写了这样的代码，用于一堆具有一些共性的组件：

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 {
   ...
}

然而，阅读On 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，我想知道我是否在正确的轨道上，或者对于这种继承或组合有更好的方法和最佳实践。

Answer 1

不需要像你那样嵌套三元运算符，你可以这样做：

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>
        )
    }
}

Answer 2

通过更仔细地阅读 React 文档，我发现我在正确的轨道上。只有我的示例可以通过省略一对括号并使用特殊的 props.children .

来简化

我可以将问题的丑陋代码重写成这样 'parent' 组件：

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

以上组件用于多个 'child' 组件，例如：

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} />

这种方法消除了三元结构，因此节省了代码行，并且更易于理解。

如何在 React 中构建专用组件

How to build specialized components in React

inheritance

composition

reactjs