ReactJs：從另一個沒有關系的組件（父子）呼叫方法

我有一個組件->

AppLanding 呈現 2 個其他組件的組件 -

AppActions
AppListings

AppActions 和 AooListings 之間沒有聯系。

通過單擊 中的按鈕AppAction，我想呼叫 中的方法AppListings。

這個的必要性——

AppListings包含Ag-Grid和AppActions包含按鈕操作。單擊中的按鈕時AppActions，我想呼叫AppListings其中控制 Ag-Grid 的 columnapi 的方法AppListings

如果它有父子關系，我會將方法傳遞給AppListings，但在這種情況下我不能，因為它沒有關系。

uj5u.com熱心網友回復：

您希望同級組件進行通信。你可能想看看這個答案：https : //stackoverflow.com/a/36144048/1065780

這個想法要么使用狀態管理器redux，要么讓你的父組件從一個兄弟組件接收事件并將更改的 props 傳遞給另一個兄弟組件，如下所示：

function AppLanding() {
  const [isSomethingToggled, setIsSomethingToggled] = React.useState(false);

  const handleAction = () => {
    setIsSomethingToggled(!isSomethingToggled);
  };
  
  return (
    <div>
      <AppActions onClick={handleAction} />
      <AppListings isSomethingToggled={isSomethingToggled} />
    </div>
  );
}

function AppActions({ onClick }) {
  return (
    <div>
      <button onClick={onClick}>Click action</button>
    </div>
  );
}

function AppListings({ isSomethingToggled }) {
  return <div>Is something toggled: {isSomethingToggled ? 'yes' : 'no'}</div>;
}

ReactDOM.render(<AppLanding />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>


<div id="root">
</div>

uj5u.com熱心網友回復：

您可以在 AppActions 頁面中對按鈕的單擊事件使用 redux，并在 AppListings 頁面中使用 useEffect 監聽 redux 狀態。

const AppActions = (props) =>{
    const clickEvent = () => {
        //you can add page restriction
        props.setReduxState({callMethod:true/*, page:"AppActions"*/})
    }

    return <button onClick={clickEvent}>Button</button>
}

const mapDispatchToProps = {
    setReduxState: reduxStateOperations.setReduxState
}

const connector = Redux.connect(null, mapDispatchToProps);
export default connector(AppActions);

const AppListings = (props) =>{
    const method = () => { console.log("called") }

    useEffect(() => {
        if(props.reduxState?.callMethod) {
            method()
            props.setReduxState(undefined)
        }
    }, [props.reduxState])

    return <>AppListings Page</>
}

const mapStateToProps = (state: any) => {
    return {
        reduxState: state.reduxState.reduxState,
    }
}
const mapDispatchToProps = {
    setReduxState: reduxStateOperations.setReduxState
}

const connector = Redux.connect(mapStateToProps, mapDispatchToProps);
export default connector(AppListings);

uj5u.com熱心網友回復：

您是否考慮過React.Context用于創建全域提供程式（或專門針對您的布局）？通過這種方式，您可以將您的操作存盤在減速器中。

鉤子/使用背景關系.jsx

import React from 'react'

// Set a relevant initial state
const INITIAL_STATE = {}

// Add actions for your application
const ACTIONS = {
  UPDATE_VAR: 'update-var',
  DELETE_VAR: 'delete-var'
}

const reducer = (state, action) => {
  const next = { ...state } // Shallow copy

  switch (action.type) {
    case ACTIONS.UPDATE_VAR:
      next.var = action.data
      break
    case ACTIONS.DELETE_VAR:
      delete next.var
      break
  }

  return next
}

const Context = React.createContext({
  state: { ...INITIAL_STATE },
  dispatch: () => null
})

export const Provider = ({ children }) => {
  const [state, dispatch] = React.useReducer(
    reducer, init(false)
  )

  return (
    <Context.Provider value={[state, dispatch, ACTION]}>
      {children}
    </Context.Provider>
  )
}

// Rename to something relevant
const useContext = () => {
  const [state, dispatch] = React.useContext(Context)

  return [state, dispatch]
}

export default useContext

pages/index.jsx：提供狀態

import { Provider } from '../hooks/use-context'

const Page = () => (
  <Provider>
    <AppActions />
    <AppListings />
  </Provider>
)

export default Page

components/app-actions.jsx：更新狀態

import useContext from '../hooks/use-context'

const AppActions = () => {
  const [, dispatch] = useContext()

  return (
    <button onClick={() => dispatch(/* action */)>
      Click Me
    </button>
  )
}

export default AppActions

components/app-listings.jsx : 消費狀態

import useContext from '../hooks/use-context'

const AppListings = () => {
  const [state] = useContext()

  return (
    <pre>{JSON.stringify(state, null, 2)</pre>
  )
}

export default AppListings 

您還可以查看第三方解決方案，例如Redux。

標籤：javascript 查询 反应

上一篇：如何為不同的可選值添加正則運算式？

下一篇：在php中使用jquery禁用輸入框中的特定日期不起作用