代码之家  ›  专栏  ›  技术社区  ›  Aessandro

React组件未连接到存储

  •  0
  • Aessandro  · 技术社区  · 6 年前

    我一直在用 this 创建以下内容。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {connect} from 'react-redux';
    import PropTypes from 'prop-types';
    
    import {Alert, No} from './pure/Icons/Icons';
    import Button from './pure/Button/Button';
    import Modal from './pure/Modal/Modal';
    
    import {setWarning} from '../actions/app/appActions';
    
    const WarningModal = ({withCleanup, message, isWarning}) => {
        const [
            title,
            text,
            leave,
            cancel
        ] = message.split('|');
    
        console.log(isWarning)
    
        const handleOnClick = () => {
            setWarning(false);
            withCleanup(true);
        }
    
        return(
            <Modal>
                <header>{title}</header>
                <p>{text}</p>
                <Alert />
                <div className="modal__buttons-wrapper modal__buttons-wrapper--center">
                    <button 
                        onClick={() => withCleanup(false)} 
                        className="button modal__close-button button--icon button--icon-only button--text-link"
                    >
                        <No />
                    </button>
                    <Button id="leave-warning-button" className="button--transparent-bg" onClick={() => handleOnClick()}>{leave}</Button>
                    <Button id="cancel-warning-button" onClick={() => withCleanup(false)}>{cancel}</Button>
                </div>
            </Modal>
        );
    }
    
    WarningModal.propTypes = {
        withCleanup: PropTypes.func.isRequired,
        message: PropTypes.string.isRequired,
        isWarning: PropTypes.bool.isRequired
    };
    
    const mapStateToProps = state => {
        return {
            isWarning: state.app.isWarning
        }
    };
    
    connect(mapStateToProps, {
        setWarning
    })(WarningModal);
    
    export default (message, callback) => {
        const modal = document.createElement('div');
        document.body.appendChild(modal);
    
        const withCleanup = (answer) => {
            ReactDOM.unmountComponentAtNode(modal);
            document.body.removeChild(modal);
            callback(answer);
        };
    
        ReactDOM.render(
            <WarningModal 
                message={message} 
                withCleanup={withCleanup} 
            />,
            modal
        );
    };
    

    我需要调度一个操作来更新状态属性(“iswarning”),该属性控制“warningmodal”的可见性,但这似乎无法将我的组件连接到存储:

    connect(mapStateToProps, {
        setWarning
    })(WarningModal);
    
    ConfigureStore.js
    
    ...
        return createStore(
            combineReducers(reducers),
            composeEnhancers(
                applyMiddleware(...middlewares)
            )
        );
    ...
    
    2 回复  |  直到 6 年前
        1
  •  0
  •   stone    6 年前

    呼唤 connect() 返回包装的React组件构造函数。此代码未使用的返回值 connect 总之,它被扔掉了。

    修复此问题的最小更改是保存返回值 连接 在一个新变量中,并使用它来代替 WarningModal 在导出的组件构造函数的呈现函数中:

    const WarningModalContainer = connect(mapStateToProps, {
        setWarning
    })(WarningModal);
    

    ReactDOM.render(
            <WarningModalContainer 
                message={message} 
                withCleanup={withCleanup} 
            />,
            modal
        );
    
        2
  •  0
  •   xadm    6 年前

    应该有

    export default connect(mapStateToProps, {
      setWarning
    })(WarningModal);
    

    通过这种方式,您可以导入Redux连接的组件进行渲染(在单独的文件中)-在您的版本中,渲染将使用原始(未连接)组件进行装载,

    可以在一个文件中完成,但不建议这样做。