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

Question

我想为我的移动应用程序添加背景，但是当我使用 "this.props.children" eslint 说我 "Must use destructuring props assignment"。为什么我可以解构这个道具？

这是我的代码，

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

我有这个错误，

提前感谢您的帮助！

Answer 1

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

这是由于 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>
    );
  }
}

Answer 3

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

Answer 4

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

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

Answer 5

对于 class 组件：

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

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

How i can destructuring {this.props.children}?

javascript

destructuring

node.js

reactjs

react-native