Question

我有一个React组件，需要在安装时访问prop。实际上，我使用prop来定义getInitialState（）中的正确状态，但由于它可能是反模式，我还尝试在componentWillMount / componentDidMount中访问它，但它在生命周期的这一点始终是空的。

这是一个缩短的例子：

// MyComponent
module.exports = React.createClass({
    propTypes: {
        projectId:  React.PropTypes.number,
        customerId: React.PropTypes.number
    },

    getDefaultProps() {
        return {
            projectId:  null,
            customerId: null
        }
    },

    componentWillMount() {
        this.getNamespace()
    },

    componentDidMount() {
        this.getNamespace()
    },

    getNamespace() {
        var str = "items"

        if (this.props.customerId) str += "_c" + this.props.customerId
        if (this.props.projectId)  str += "_p" + this.props.projectId

        // this.props.projectId is always empty here
        // this.props.customerId is always empty here
        // so str is always "items"

        console.log("NS is " + str)
        console.log(this.props)

        return str
    },

    render() {
        return (
            <AppModule />
        )
    }
})

// Usage:
<MyComponent customerId="1" projectId="2" />

为什么this.props.projectId和this.props.customerId在getInitialState，componentWillMount和componentDidMount中总是为空？我做错了什么，应该如何解决？不想只使用脏的setTimeout并等待：）

哦，在我忘记之前：我实际上可以使用这些道具。但不是在这种状态。此外，调用我的组件的组件不刷新道具或类似的东西。至少我是这么认为的。

感谢您的帮助！

Answer 1

我遇到了同样的问题，我预计道具会立即可用，但它们似乎不太可能，因为它们来自父母，它依赖于（相对）长时间运行的外部调用来构建这些道具。使用componentDidMount对我来说不起作用，但componentWillReceiveProps确实很好用。我认为你可以从那里调用getNamespace。

Answer 2

这应该有效：）

  if (this.props.customerId) str += "_c" + this.props.customerId

另外我认为你不会访问componentWillMount中的道具。

但我想知道，你在哪里定义道具价值？ = /

ReactJS：道具不能立即使用？

2 个答案: