我如何解构 {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

功能组件案例缺少答案。 孩子只是传递给组件的道具。 为了像使用 props.url 一样使用它，您需要将它添加到该列表中，以便它可以从 props 对象中“拉出”。

export const Welcome = ({name, hero, children}) => {
        return (
        <div>
           <h1> Class Component with {name} as {hero} </h1>
            {children}
        </div>
        )
    }

Answer 2

您可以尝试以下方法来this.props children ：

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;

希望这有帮助！

Answer 3

这是由于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 4

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

Answer 5

对于类组件：

export class Welcome extends Component {
    render(){
        const {name, hero, children} = this.props
        return (
            <div>
                <h1> Class Component with {name} as {hero} </h1>
                {children}
            </div>
            )
    }
}