Question

当使用带有defaultProps的2x深对象时遇到此问题，如果提供了第一级值，则会出现childen元素未用作默认值;

这里的代码示例：

class User extends React.Component {
  render() {
    console.log('name: ', this.props.user.name);
    const {name, star} = this.props.user;
    return <div>Hello {name} - {star && '★'} </div>;
  }
}

User.defaultProps = {
    user: {name:'anonymous', star: true }
}

class UserList extends React.Component {
  render() {
    return this.props.users.map((user,i) => <User key={i} {...user} />);
  }
}

UserList.defaultProps = {
    users: [
        {user: {name:'bob', age:22}},
        {user: {age: 25}},
    ]
};

ReactDOM.render(
  <UserList />,
  document.getElementById('container')
);

在上面的示例中，第一个看起来会说Hello bob，第二个看起来不会说Hello _，而不是Hello anonymous

这是问题的JsFiddle：https://jsfiddle.net/69z2wepo/98499/

有办法做到这一点吗？否则嵌套的默认道具是无用的，因为它们甚至没有定义，3级深度会使应用程序崩溃。

Answer 1

COPY btmp FROM '/tmp/test.xml' ( FORMAT binary )仅在顶级道具未定义时使用。

改为设置defaultProps组件的defaultProps。

Answer 2

如果道具从父母传递给孩子，则不能改变道具。 Iff没有父母传递的道具然后您可以为孩子拥有默认道具。但我强烈建议使用state，如果你想要改变子组件，因为反应符合纯函数的概念，因此你要说明如果想设置你的子组件的状态，例如..

class User extends React.Component {
    constructor(props){
  super(props);
  this.state ={
  name:'anonymous', 
  star: true
  }
  }
  render() {
    /* console.log('name: ', this.props.user.name);
        const {name, star} = this.props.user; */
    return <div>Hello {this.state.name} - {this.state.star && '★'} </div>;
  }
}

/* User.defaultProps = {
  user: {name:'anonymous', star: true }
}
 */
class UserList extends React.Component {
  render() {
  return(
  <User/>
  )
    //return this.props.users.map((user,i) => <User key={i} {...user} />);
  }
}

/* UserList.defaultProps = {
  users: [
    {user: {name:'bob', age:22}},
    {user: {age: 25}},
  ]
}; */

ReactDOM.render(
  <UserList />,
  document.getElementById('container')
);

React没有对defaultProp进行深入比较

2 个答案: