如何将item.id传递到swipeButtons中？

import React from 'react';
import SwipeButtons from './SwipeButtons';

const ParentComponent = () => {
  const item = { id: 1, name: 'example' };

  return (
    <div>
      {/* Other components */}
      <SwipeButtons itemId={item.id} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const SwipeButtons = (props) => {
  // Access the itemId prop
  const { itemId } = props;

  // Use the itemId in the component logic

  return (
    <div>
      {/* Component content */}
    </div>
  );
};

export default SwipeButtons;

import React, { createContext } from 'react';
import SwipeButtons from './SwipeButtons';

// Create a context object
const ItemContext = createContext();

const ParentComponent = () => {
  const item = { id: 1, name: 'example' };

  return (
    <div>
      {/* Other components */}
      <ItemContext.Provider value={item.id}>
        <SwipeButtons />
      </ItemContext.Provider>
    </div>
  );
};

export default ParentComponent;

import React, { useContext } from 'react';
import ItemContext from './ItemContext';

const SwipeButtons = () => {
  // Consume the item id from context
  const itemId = useContext(ItemContext);

  // Use the itemId in the component logic

  return (
    <div>
      {/* Component content */}
    </div>
  );
};

export default SwipeButtons;

// Redux示例
// Store configuration
import { createStore } from 'redux';

const initialState = { item: { id: 1, name: 'example' } };

const reducer = (state = initialState, action) => {
  // Reducer logic
};

const store = createStore(reducer);

// Parent component
import React from 'react';
import { Provider } from 'react-redux';
import SwipeButtons from './SwipeButtons';

const ParentComponent = () => {
  return (
    <Provider store={store}>
      <div>
        {/* Other components */}
        <SwipeButtons />
      </div>
    </Provider>
  );
};

export default ParentComponent;

// SwipeButtons component
import React from 'react';
import { connect } from 'react-redux';

const SwipeButtons = (props) => {
  // Access the itemId from Redux store
  const { itemId } = props;

  // Use the itemId in the component logic

  return (
    <div>
      {/* Component content */}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    itemId: state.item.id,
  };
};

export default connect(mapStateToProps)(SwipeButtons);