Как я могу разрушить {this.props.children}?
Я хочу добавить фон в свое мобильное приложение, но когда использую 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>
);
}
}у меня есть эта ошибка "'children' отсутствует при проверке реквизита"
когда я использую этот код,
export default class WallPaper extends Component {
render() {
(this.props) => {
return (
<ImageBackground
source = {backgroundimg}
imageStyle = {{ opacity: 0.9 }}
style = {styles.container}
>
{props.children}
</ImageBackground>
);
}
}
}
Заранее спасибо за вашу помощь !
Кроме того, это правило линтера, поэтому технически это не ошибка, поэтому, если вы не работаете в команде, которая обеспечивает соблюдение определенного набора правил, вам следует изменить правила на те, с которыми вам удобнее всего работать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы можете попробовать следующее, чтобы деструктурировать 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. Обратите внимание, вам потребуется установить пакет типы опор:
// ...
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;
Надеюсь, это поможет!
Я уже пробовал этот метод, но получаю сообщение об ошибке «При проверке реквизита отсутствует 'children'»
@MichelMelhem const { children } = this.props; - это именно то, как вы добиваетесь деструктуризации. Если у вас есть проверки PropTypes для компонента WallPaper, см. Этот отвечать, чтобы узнать о подходе к проверке дочерних PropTypes. Попробуйте сначала временно удалить propTypes, чтобы увидеть, устранена ли ошибка линтинга с помощью этого деструктурирующего назначения. Если у вас по-прежнему возникают проблемы после добавления дочерних элементов к проверке propTypes, поделитесь своим кодом propTypes для дополнительной поддержки. Спасибо!
Ваш проект требует, чтобы каждый компонент имел свойства propTypes? Если да, продолжайте и добавьте propTypes к этому компоненту.
Это связано с правило линтинга.
Вы можете отключить правило, если не хотите разрушать.
Если хочешь, то можешь сделать вот так.
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>
);
}
}
@MichelMelhem что ?? Вы можете писать по-английски ? не могу понять, что вы написали?
извините, это был сбой, это сообщение: да, я знаю, что могу отключить это правило, но если это правило существует, это, вероятно, веская причина
export default class WallPaper extends Component {
render() {
(this.props) => {
return (
<ImageBackground
source = {backgroundimg}
imageStyle = {{ opacity: 0.9 }}
style = {styles.container}
>
{props.children}
</ImageBackground>
);
}
}
}
Когда я использую ваш код, у меня появляется ошибка синтаксического анализа: неожиданный токен 15 | render () {16 | props => (> 17 | return (| ^ 18 | <ImageBackground 19 | source = {backgroundimg} 20 | imageStyle = {{opacity: 0.9}})
Для случаев функциональных компонентов ответов нет. children - это просто опора, переданная компоненту. Чтобы использовать его так же, как вы используете props.url, вам нужно добавить его в этот список, чтобы его можно было «вытащить» из объекта props.
export const Welcome = ({name, hero, children}) => {
return (
<div>
<h1> Class Component with {name} as {hero} </h1>
{children}
</div>
)
}
и для компонента класса:
export class Welcome extends Component {
render(){
const {name, hero, children} = this.props
return (
<div>
<h1> Class Component with {name} as {hero} </h1>
{children}
</div>
)
}
}