Question

我在我的一个组件中传递了一个流星集合作为道具并试图弄明白我何时才能获得道具？

我尝试访问（例如this.props.userData）getInitialState中的道具是未定义的，然后我尝试在componentDidMount中访问它，它表示未定义，但在渲染方法中它可以正常工作。

render之前或之后的哪种方法可以告诉我，我可以访问道具？我想用道具所具有的值来初始化状态。

例如，在下面的代码中，我收到一条错误消息，指出userData未定义。

getInitialState(){
    return{
        firstName : this.props.userData.firstName
    }
}

修改所以我正在做这样的事情，我只使用道具来初始化状态变量。

export default React.createClass({
    getInitialState(){
        return {
            email : this.props.user.email
        }
    },

    onFormSubmit(event){
        event.preventDefault();
    },

    onTextFieldChange(event){

        switch (event.target.name) {
            case "email":
                this.setState({
                    email:event.target.value
                });
                break;
        }

    },

    render() {
        console.log(this.props.user.email);
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <h3 className="panel-title text-center"><strong>Sign in with Existing Account</strong></h3>
                </div>
                <form className="form-horizontal" id="frmSignIn" role="form" onSubmit={this.onFormSubmit}>
                    <div className="modal-body">
                        <div className="form-group">
                            <label className="col-xs-4 control-label">Email</label>
                            <div className="col-xs-8">
                                <input type="email" id="email" name="email" className="form-control"
                                    value={this.state.email}
                                    onChange={this.onTextFieldChange}
                                    placeholder="example@domain.com"
                                    required/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-xs-4 control-label">Password</label>
                            <div className="col-xs-8">
                                <input type="password" id="password" name="password" className="form-control"
                                placeholder="Password"
                                required/>
                                <label id="signin-error" className="error"> </label>
                            </div>
                        </div>
                    </div>
                    <div className="panel-footer">
                        <label className="col-xs-4 control-label"></label>
                        <div className="col-xs-8">
                            <input type="submit" className="btn btn-primary pull-right" value="SignIn"/>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
});

Answer 1

组件在实例化时立即接收初始属性。实际上它是构造函数的第一个参数：

class MyComp extends React.Component {
  constructor (props) {
    super(props)
    // do something with props
  }

  componentWillReceiveProps (nextProps) {
    // properties changed   
  }
}

在您的情况下，我最好的猜测是父组件尚未准备好您的属性。您可以通过在构造函数和componentWillReceiveProps(nextProps)函数中观察它们来跟踪传递的属性。

Answer 2

Meteor与服务器的任何其他集合一样同步用户数据。这意味着最初Meteor.user()将返回undefined，并且您的组件不会收到prop。稍后更新用户文档时，组件的道具也会更新。您可以通过实施function componentWillReceiveProps(newProps) {...}来抓住此事件。

我什么时候可以访问react类中的props？

2 个答案: