从 React Native 中的其他组件"继承"的最佳方式？

Question

例如，如果我需要制作一个按钮的"小"和"大"版本，它有很多(但不是全部(方法和共同的状态，那么在 React Native 中实现它的最佳方法是什么？

我

简单地扩展"父"组件(我可能错了(的问题是使用 Props 很混乱。

我一直在实现它的方式只是给"父"组件一个布尔道具(在这个例子中，表示"小"或"大"(，然后根据该布尔值更改其功能。"子"组件几乎只是为了可读性。

Answer 1

只需扩展组件即可创建子组件。

class Label extends React.Component{
  constructor(props){
    super(props);
    this.className='plain-label';
  }
   render(){
     return <span className={this.className}>
        {this.props.children} 
      </span>
   }
}

class SmallLabel extends Label{
  constructor(props){
    super(props);
    this.className = this.className + ' small-label';
  }
}

然后使用它：

class Main extends React.Component{
    render(){
      ....
      <Label> Plain Label </Label>
      <SmallLabel> SmallLabel </SmallLabel>
    }
}

在大多数情况下，继承都是不可行的解决方案。因为使用继承扩展组件或多或少会导致在某个时候出现无法无缝干扰行为的场景。但是，使用组合，这是可能的。

扩展/子类化 React 组件的良好实践，请参阅：https://discuss.reactjs.org/t/best-practices-for-extending-subclassing-components/1820/3

Answer 2

如果您不打算覆盖任何方法而只是进行视觉更改，则最好使用 props。仅为视觉更改创建不同的组件可能会创建不必要的复杂逻辑。

你能做的就是利用defaultProps

例

class CustomLabel extends React.Component{
   render(){
     const { isSmall, containerStyle, children } = this.props; 
     return (
       <span
         className={`plain-label ${(isSmall && 'small-label')}`}
         style={containerStyle}
       >
         {children} 
       </span>
     )
   }
}
CustomLabel.defaultProps = {
  isSmall: false,
  containerStyle: {},
  children: 'I need some children to display'
};
export default CustomLabel;

---

<CutomLabel>{'Plain label because gets the default props'}</CustomLabel>
<CustomLabel isSmall>{'Small label because prop is true'}</CustomLabel>
<CustomLabel isSmall containerStyle={{ color: 'red' }}>{'Red small label'}</CustomLabel>

Answer 3

就大小而言，我建议只将类名传递给组件，并以该类名为条件进行 css 样式设置(如果您使用的是外部样式表(。就扩展类而言，在不知道您的确切用例的情况下很难给出准确的答案。