反應本地渲染子組件

Question

我正在嘗試創建一個標題組件，該組件會根據您正在查看的屏幕而變化。 但是，如果我嘗試創建一些動態按鈕，則子組件將無法工作。

我已將標題的每個部分拆分為較小的組件，問題是除非我自己添加每個按鈕，否則標題HeaderRightSide的右側不會呈現。

const screenIcon = {
    Home: 'home',
    Settings: 'tools'
}


export class AppHeader extends Component {
    static propTypes = {
        screenName: PropTypes.string.isRequired,
        navigation: PropTypes.object.isRequired,
        googleUser: PropTypes.object.isRequired,
        UserSignIn_logOut: PropTypes.func.isRequired
    }
    signOut = async () => {
        try {
            await GoogleSignin.revokeAccess();
            await GoogleSignin.signOut();
        } catch (error) {
            // console.error(error);
        } finally {
            this.props.UserSignIn_logOut({});
            this.props.navigation.navigate('SignIn');
        }
    }
    componentDidMount() {
        console.log(this.props.navigation.state)
    }
    render() {
        return (
            <Header>
                <HeaderLeftSide screenName={this.props.screenName} />
                <HeaderBody screenName={this.props.screenName} />
                <HeaderRightSide screenName={this.props.screenName} navigation={this.props.navigation} />
            </Header>
        )
    }
}

HeaderLeftSide = (props) => (
    <Left>
        <Button transparent>
            <Icon name={screenIcon[props.screenName]} />
        </Button>
    </Left>
)

HeaderBody = (props) => (
    <Body>
        <Title>{props.screenName}</Title>
    </Body>
)

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).forEach(screen => 
           ( <Button transparent>
            <Icon name={screenIcon[screen]} />
        </Button>)
        )}
    </Right>
)


const mapStateToProps = (state) => ({
    googleUser: state.UserSignInReducer.googleUser
})

const mapDispatchToProps = {
    UserSignIn_logOut: () => {
        dispatch(UserSignIn_logOut());
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppHeader)

Answer 1

我只需要更改每個地圖即可。 正確的代碼：

HeaderRightSide = (props) => (
    <Right>
        {Object.keys(screenIcon).map(screen => (
            <Button transparent>
                <Icon name={screenIcon[screen]} />
            </Button>
        )
        )}
    </Right>
)

反應本地渲染子組件

問題描述

1 個解決方案

解決方案1
0 已采納 2019-06-28 14:02:11

反應本地渲染子組件

問題描述

1 個解決方案

解決方案1 0 已采納 2019-06-28 14:02:11

解決方案1
0 已采納 2019-06-28 14:02:11