reactjs - 如何在 React 中构建专门的组件
问题描述
我发现自己为一堆有一些共性的组件编写了这样的代码:
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,我想知道我是否走在正确的轨道上,或者对于这种继承或组合有更好的方法和最佳实践。
解决方案
不需要像你那样嵌套三元运算符,你可以这样做:
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>
)
}
}