Question

我的react-toastify组件中已经实现了App.js元素：

class App extends Component {
  componentDidUpdate(prevProps) {
    const { toast } = this.props
    if(toast.id !== prevProps.toast.id) {
      this.notify(toast)
    }
  }

  notify = (data) => {
    switch(data.type) {
      case TOAST.TYPE.ERROR:
        ...
        return toast.show()
    }
  }

  render() {
    return (
      <BrowserRouter> 
        <div className="app">
          <Switch>
            <Route path={ getRoutePath('password.set') } component={ PasswordSet } />
            <Route path={ getRoutePath('password.reset') } component={ PasswordReset } />
            <Route path={ getRoutePath('login') } component={ LoginSection } />
            <Route path={ getRoutePath('home') } component={ AuthenticatedSection } />
          </Switch>
          <ToastContainer 
            className="custom-toastify" 
            autoClose={ 5000 } 
            hideProgressBar={ true }
            closeButton={ <CloseButton /> } 
          />
        </div>
      </BrowserRouter>
    )
  }
}

function mapStateToProps({ toast }) {
  return { toast }
}

现在考虑以下情形：我在UsersAdmin中有一个AuthenticatedSection PureComponent，您可以在其中启用/禁用用户。当您单击启用/禁用按钮时，UsersAdmin组件会由于users的redux状态更改而重新呈现，然后它也会重新呈现，因为我在成功/错误api调用中显示了吐司。

toggleUsersDisabled = (user) => () => {
        const { modifyUser, showToast } = this.props
        modifyUser(user.id, {
            disabled: user.disabled === 0 ? 1 : 0
        }).then((response) => {
            showToast(`${response.value.name} has been ${response.value.disabled ? 'disabled' : 'enabled'}`)
        }).catch(_noop)
    }

showToast将新消息调度到redux状态以进行敬酒。显示吐司时，是否可以以某种方式防止子组件的重新发布？

编辑：添加了UsersAdmin Redux连接，包括选择器

// users selector
import { createSelector } from 'reselect'

const getUsers = state => state.users.get('data')
const getIsFulfilled = state => state.users.get('isFulfilled')

export const getFulfilledUsers = createSelector(
    [getUsers, getIsFulfilled],
    users => users
)

// UsersAdmin
const mapStateToProps = (state) => {
    return {
        users: getFulfilledUsers(state)
    }
}


UsersAdmin.propTypes = {
    users: PropTypes.object.isRequired,
    fetchUsersList: PropTypes.func.isRequired,
    modifyUser: PropTypes.func.isRequired,
    deleteUser: PropTypes.func.isRequired,
    showToast: PropTypes.func.isRequired
}

export default connect(mapStateToProps, { fetchUsersList, modifyUser, deleteUser, showToast })(UsersAdmin)

Answer 1

我真的不明白为什么要在App.js

中添加所有吐司登录信息

如果您查看以下位置的文档： https://github.com/fkhadra/react-toastify#installation

您唯一需要做的就是将<ToastContainer />添加到您的应用中，就可以完成，就像您在示例中所做的一样。

现在可以调用刚刚导入的烤面包了

import { toast } from 'react-toastify';

进入系统中您喜欢的任何组件，现在只需运行toast函数，就可以祝酒。

即：

import { Component } from 'react';
import { toast } from 'react-toastify';

class SomeComponent extends Component {
    showToast() {
        toast('you now see a toast');
    }

    render() {
        return <button onClick={()=>this.showToast()}>toast it</button>;
    }
}

反应级联渲染

1 个答案: