Как я могу разрушить {this.props.children}?

Question

Я хочу добавить фон в свое мобильное приложение, но когда я использую «this.props.children», eslint говорит мне «Должен использовать деструктурирующее назначение реквизита».Почему я могу разрушить этот реквизит?

Это мой код,

export default class WallPaper extends Component {
  render() {
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {this.props.children}
      </ImageBackground>
    );
  }
}

, когда я использую этот код

export default class WallPaper extends Component {
  render() {
    const { children } = this.props;
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

у меня появляется эта ошибка «в проверке реквизита отсутствуют дети»

при использовании этого кода,

export default class WallPaper extends Component {
  render() {
     (this.props) => {
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {props.children}
      </ImageBackground>
    );
    }
  }
}

У меня есть эта ошибка,

Заранее благодарю за помощь!

Answer 1

Это связано с правилом linting .

Вы можете отключить правило, если не хотите уничтожать.

Если хотите, то можете сделать это, какэто.

export default class WallPaper extends Component {
  render() {
  const {children} = this.props
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {this.props.children}
      </ImageBackground>
    );
  }
}

Answer 2

export default class WallPaper extends Component {
  render() {
     (this.props) => {
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {props.children}
      </ImageBackground>
    );
    }
  }
}

Answer 3

Вы можете попробовать следующее для деструктурирования children из this.props:

export default class WallPaper extends Component {
  render() {
    const { children } = this.props;

    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

Похоже, вашему проекту может потребоваться propTypes для этого компонента.Попробуйте следующее, чтобы добавить children тип проп.Обратите внимание, вам нужно будет установить пакет prop-types :

// ... 
import PropTypes from 'prop-types';

class WallPaper extends Component {      
  render() {
    const { children } = this.props;

    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

WallPaper.propTypes = {
  children: PropTypes.node // or PropTypes.node.isRequired to make it required
};

export default WallPaper;

Надеюсь, это поможет!