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

继承在大多数情况下 - 只是不好的可行解决方案。因为扩展具有继承性的组件或多或少会在某些情况下导致某种情况，即行为无法无缝地进行。但是，使用Composition，它可能。

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

Answer 2

就调整大小而言，我建议只将类名传递给组件，并使css样式以该类名为条件（如果使用外部样式表）。至于扩展课程，很难在不知道确切用例的情况下给出准确的答案。

Answer 3

如果您不打算覆盖任何方法并且只是进行视觉更改，最好使用道具。仅为视觉变化创建不同的组件可能会产生不必要的复杂逻辑。

您可以做的是使用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>

从React Native中的其他组件“继承”的最佳方法是什么？

3 个答案: