Question

是否可以将companyLogo的数据设置为const而无需保存到州？并使渲染函数中的变量可用作道具传递给组件，如下所示。

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>
    )
  }
}

Answer 1

组件安装前公司徽标的价值道具是什么？你可以在渲染上添加验证。

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

因此只有在值可用时才会出现公司徽标的渲染。

Answer 2

不建议从道具准备组件的状态，例如，如果您的用户徽标在商店中发生更改，则不会更新组件中的徽标。如果你真的想在状态中使用props，你必须使用componentWillRecieveProps在商店中更改用户徽标时更新状态，以便组件可以相应更新，或者直接使用其他评论中提到的道具

P.S。抱歉，我的声誉太低而无法发表评论

使变量在渲染函数中可用|反应js

2 个答案: