Question

我想通过单击REFERENCE ASSEMBLY [Newtonsoft.Json]; REFERENCE ASSEMBLY [Microsoft.Analytics.Samples.Formats]; USING Microsoft.Analytics.Samples.Formats.Json; DECLARE @inputFile string = @"\input\yourInputJSON.json"; DECLARE @outputFile string = @"\output\output.csv"; @input = EXTRACT id string, largeobjects string, date string, timezone string, lang string, country string FROM @inputFile USING new MultiLevelJsonExtractor("objects", false, "id", "largeobjects", "date", "timezone", "admin.lang", "admin.country" ); // Convert the JSON column to SQL MAP to multiple rows @working = SELECT id, JsonFunctions.JsonTuple(largeobjects).Values AS largeobject, date, timezone, lang, country FROM @input; // Explode the JSON SQL MAP @output = SELECT id, x.y AS largeobject, date, timezone, lang, country FROM @working CROSS APPLY EXPLODE(largeobject) AS x(y); OUTPUT @output TO @outputFile USING Outputters.Csv(quoting : false);使用Redux打开我的模态，但是在重新加载浏览器后它仍然出现。我看不到自己在代码中做错了什么。我做错了什么，该如何解决？如果需要其他代码，我会根据要求进行证明。

这里的<CheckoutButton/>代码：

TacoTypes.js

这是import React, { Component } from 'react'; import { connect } from 'react-redux'; import FoodButton from '../../components/FoodButton/FoodButton'; import Aux from '../../hoc/Aux'; import CheckoutButton from '../../containers/CheckoutButton/CheckoutButton'; import Modal from '../../components/Modal/Modal'; import * as actionType from '../../store/actions'; class TacoTypes extends Component { render() { return( <Aux> <CheckoutButton clicked={() => this.props.openModalRedux()}/> <Modal isOpen={this.props.isOpen}/> </Aux> ); } } const mapStateToProps = state => { return { isOpen: state.isOpen.isModalOpen }; }; const mapDispatchToProps = dispatch => { return { openModalRedux: () => dispatch({type: actionType.OPEN_MODAL}) }; }; export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);（归约器）文件：

global.js

这里的import * as actionType from '../store/actions'; const initialState = { isModalOpen: false }; const global = (state = initialState, action) => { switch (action.type) { case actionType.OPEN_MODAL: return { ...state, isModalOpen: true } case actionType.CLOSE_MODAL: return { ...state, isModalOpen: false } } return state }; export default global;代码：

Modal.js

Answer 1

问题是您没有告诉Modal组件显示或隐藏，您应该这样做以使其起作用，诸如此类

import React, { Component } from 'react';

import classes from './Modal.css';
import Aux from '../../../hoc/Auxiliary/Auxiliary';
import Backdrop from '../Backdrop/Backdrop';

class Modal extends Component {

    shouldComponentUpdate ( nextProps, nextState ) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }

    render () {
        return (
            <Aux>
                <Backdrop show={this.props.show} clicked={this.props.modalClosed} />
                <div
                    className={classes.Modal}
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0'
                    }}>
                    {this.props.children}
                </div>
            </Aux>
        )
    }
}

export default Modal;

如何通过使用redux单击按钮来打开我的模态？

1 个答案: