Question

我想为我的移动应用添加背景，但是当我使用“ this.props.children”时埃斯林特说我“必须使用破坏性道具分配”。为什么我可以破坏这个道具？

这是我的代码，

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

您可以尝试以下方法从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道具类型。请注意，您将需要安装软件包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

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

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

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

以及类组件：

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 5

这是由于linting rule造成的。

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

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

private void btnShowChartReport_Click(object sender, EventArgs e)
{
    DateTime stardate = Convert.ToDateTime(dateTimePickerFrom.Value.ToString());
    DateTime enddate = Convert.ToDateTime(dateTimePickerTo.Value.ToString());
    try
    {
        db = new BankiHsabEntities1();
        if (checkBoxAllserviceUpdate.Checked == true)
        {
            var result = (from u in db.Transaction
                          where u.TransactionDate >= stardate && 
                          u.TransactionDate <= enddate
                          group u by u.Employee.FirstName into g
                          select new
                          {
                              StaffId = g.Key,
                              Total = g.Count()
                           }).ToList();
            chart1.DataSource = result;

            chart1.Series["Series1"].XValueMember = "StaffId";
            chart1.Series["Series1"].YValueMembers = "Total";
            chart1.Series["Series1"].Name = "Employees";

            chart1.DataBind();
            chart1.Show();
        }
}

我如何破坏{this.props.children}？

5 个答案: