Javascript 使变量在渲染函数|中可用

是否可以将companyLogo的数据设置为

常量

，而不保存为状态？并使该变量在渲染函数中可用，以作为道具传递给组件，如下图所示

companyLogo的数据仅在用户登录后可用，因此请注意

componentDidMount

功能的使用

我相信有一种更优雅的方式可以做到这一点，只是不确定如何做到

@connect((store) => {
    return {
        user: store.user
    }
})

export default class Header extends Component {
    constructor() {
        super();

        this.state = {
            companyLogo: null
        }
    }

    componentDidMount() {
        //Get company logo and store to pass as props
        this.setState({
            companyLogo: this.props.user.user.groups[0].logoUrl
        })
    }

  render() {
    return (
        <div className="header-container">
            <Row className="header-body">
                <Branding companyLogo={this.state.companyLogo} />
                <AskQuestion />
                <Navigation />
                <Profile />
            </Row>
        </div>
    )
  }
}

@connect（（存储）=>{
返回{
用户：store.user
}
})
导出默认类头扩展组件{
构造函数（）{
超级（）；
此.state={
companyLogo:空
}
}
componentDidMount（）{
//获取公司徽标和店铺作为道具传递
这是我的国家({
companyLogo:this.props.user.user.groups[0]。logoUrl
})
}
render（）{
返回(
)
}
}

在安装组件之前，公司徽标的价值支柱是什么？ 您可以在渲染时添加验证

{
   this.props.user.user.groups && this.props.user.user.groups[0].logoUrl &&
  <Branding companyLogo={this.props.user.user.groups[0].logoUrl} />
}

{
this.props.user.user.groups&&this.props.user.user.groups[0].logoUrl&&
}

---

因此，只有当值可用时，才会对公司徽标进行渲染。

在安装组件之前，公司徽标的值是多少？ 您可以在渲染时添加验证

{
   this.props.user.user.groups && this.props.user.user.groups[0].logoUrl &&
  <Branding companyLogo={this.props.user.user.groups[0].logoUrl} />
}

{
this.props.user.user.groups&&this.props.user.user.groups[0].logoUrl&&
}

---

因此，仅当该值可用时，才会对公司徽标进行渲染。

不建议从props为组件准备状态，例如，如果您的用户徽标在商店中发生更改，则不会更新组件中的徽标。如果您确实想在状态中使用道具，则必须使用ComponentWillReceiveProps在存储区中更改用户徽标时更新状态，以便组件可以相应地更新，或者直接使用其他注释中提到的道具

---

p、 很抱歉，我的声誉太低，无法发表评论

从道具为组件准备状态是不可取的，例如，如果您的用户徽标在商店中更改，它将不会更新组件中的徽标。如果您确实想在状态中使用道具，则必须使用ComponentWillReceiveProps在存储区中更改用户徽标时更新状态，以便组件可以相应地更新，或者直接使用其他注释中提到的道具

---

p、 很抱歉，我的声誉太低，无法发表评论

？不幸的是，由于数据无法加载，请不要安装组件。

？不幸的是，请不要使用componentDidMount，因为加载时数据不可用。props公司徽标的值仅在组件安装后可用，因此componentDidMount。我目前的工作方式有什么问题吗？我只是觉得可能有更好的方法。如果公司的标志没有在组件上改变，就不需要把它放在组件的状态上。直接传给孩子就行了。在渲染时执行验证。这就是我要做的。请查看您问题的编辑-这是我的解决方案代码。非常感谢！导出默认类标头扩展组件{render（）{const companyLogo=this.props.user.user.groups[0].logoUrl；返回（{companyLogo&}}}道具公司徽标的价值仅在组件安装后可用，因此，componentDidMount。我目前的工作方式有什么问题吗？我只是觉得可能有更好的方法。如果公司的标志没有在组件上改变，就不需要把它放在组件的状态上。直接传给孩子就行了。在渲染时执行验证。这就是我要做的。请查看您问题的编辑-这是我的解决方案代码。非常感谢！导出默认类头扩展组件{render（）{const companyLogo=this.props.user.user.groups[0].logoUrl；return（{companyLogo&}}}}谢谢您的回答。我的解决方案代码在上面的注释中-您对这种方法有什么建议吗？在您的解决方案中，您没有检查const companyLogo=this.props.user.user.groups[0].logoUrl；如果his.props.user.user未定义，javascript将抛出一个错误，因此，您可以使用if conditions安全地解析键感谢您的回答。我的解决方案代码在上面的注释中-您对这种方法有什么建议吗？在您的解决方案中，您没有检查const companyLogo=this.props.user.user.groups[0].logoUrl；如果his.props.user.user未定义，javascript将抛出错误，因此可以使用if条件安全地解析键