Question

我一直在使用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
    );
};

我需要调度一个动作来更新控制“ WarningModal”可见性的状态属性（“ isWarning”），但是这似乎并没有将我的组件连接到商店：

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

ConfigureStore.js

...
    return createStore(
        combineReducers(reducers),
        composeEnhancers(
            applyMiddleware(...middlewares)
        )
    );
...

Answer 1

应该有

\n

通过这种方式，您可以输入要渲染的Redux连接组件（在单独的文件中）-在您的版本中，渲染需要原始（未连接）组件进行挂载，

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

Answer 2

对connect()的调用返回一个包装好的React组件构造函数。该代码根本没有使用connect的返回值，因此已被丢弃。

解决此问题的最小更改是将connect的返回值保存在新变量中，并在导出的组件构造函数的render函数中使用它代替WarningModal：

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

...

ReactDOM.render(
        <WarningModalContainer 
            message={message} 
            withCleanup={withCleanup} 
        />,
        modal
    );

React组件未连接到商店

2 个答案: