Question

我在互联网上搜索了这个问题的答案，但我没找到。因此，我在这里发布我的问题。

我有一个父组件（App）和一个子组件（Child）。 App组件的状态包含一些数据，如下所示：

class App extends Component {
    constructor() {
        super()

        this.state = {
            currentOrganization: {
                name: 'name',
                email: 'email'
            }
        }
        render() {
            return (
                <Child data={this.state.currentOrganization} />
            )
        }
    }
}

在我的Child组件中，我有一个表单：

class Child extends Component {
    constructor() {
        super()

        this.state = {
            formData: {
                name: '',
                email: '',
            }
        }
    }

        render() {
            return (
            <Form ... />
          )
        }
    }

根据React文档，表单通常应该具有包含与表单的每个元素对应的属性的状态。我的Child组件中的表单必须具有currentOrganization的数据（如App组件中所示）预先填充到自身中。

为了实现这一点，我必须将Child的状态设置为从其父级接收的道具。

检查我的Child组件是否收到了更新自己状态所需的道具的最佳方法是什么？

Answer 1

您可以为组件指定默认道具。

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      formData: {
        name: props.name,
        email: props.email,
      }
    }
  }

  render() {
    return (
      <Form ... />
    )
  }
}

Child.defaultProps = {
  name: '',
  email: '',
};

P.S。 props是JS对象，因此您可以像这样检查属性 "prop_name" in this.props // true|false

反应 - 检查道具是否存在

1 个答案: