javascript - 我如何解构 {this.props.children}？

Question

我想为我的移动应用程序添加背景，但是当我使用“this.props.children”时eslint 说我“必须使用解构 Prop 分配”。为什么我可以解构这个 Prop ？

这是我的代码，

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' is missing in props validation”

当我使用这段代码时，

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

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

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