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

对于类组件：

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

Answer 2

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

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

Answer 3

您可以尝试以下方法从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 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

这是由于linting rule。

如果不想破坏，可以关闭规则。

如果你愿意，你可以这样做。

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