在反应功能组件中访问“this”关键字

Question

我试图了解如何制作一个可以将自己从具有功能组件的组件数组中移除的组件。这是我正在尝试做的示例代码：

const App = () => {
    <ObjState>
        <ObjectCreator />
        <ObjectList />
    </ObjState>
}

const ObjContext = createContext();

const ObjReducer = (state, { type, payload }) => {
    switch(type) {
        case Types.ADD_OBJ:
            return {
                ...state,
                objects: [...state.objects, payload]
            };
        case Types.REMOVE_OBJ:
            return {
                ...state,
                objects: state.objects.filter(obj => obj !== payload)
            };
        default:
            return state;
    }
}

const ObjState = ({ children }) => {
    const initialState = {
        objects: []
    }

    const [state, dispatch] = useReducer(ObjRecuder, initialState);

    const addObj = (obj) => {
        dispatch({
            type: Types.ADD_OBJ,
            payload: obj
        });
    }

    const removeObj = (obj) => {
        dispatch({
            type: Types.REMOVE_OBJ,
            payload: obj
        });
    }

    return (
        <ObjContext.Provider value={{
            objects: state.objects,
            addObj,
            removeObj
        }}>
            {children}
        </ObjContext.Provider>
    );
}

const ObjCreator = () => {
  const { addObject } = useContext(ObjContext);
  const createObj =() => {
    const obj = (<ObjectTypeA key={uuid()} />);
    addObject(obj);
  }
  return (<button onClick={createObj}>create an object!</button>)
}

const ObjectList = () => {
  const { objects } = useContext(ObjContext)
  return (
    <fragment>
      {objects}
    </fragment>
  )
}

const ObjectTypeA = ({ key }) => {
  const { removeObj } = useContext(ObjContext);
  const removeSelf = () => {
      removeObj(this);
  }
  return (
    <button onClick={removeSelf}>remove me!</button>
  )
}

问题是您不能在最终的Object 组件中引用this。 我有唯一的密钥，但我不确定如何正确传递它。我试图构建一个减速器动作，从Object 中取出key 并以这种方式删除它，但key 以undefined 的形式返回，即使它是从道具中解构出来的，我正在使用箭头函数保存它。

我觉得我处理这个问题的方式不对。

Answer 1

问题

我认为当你试图在你的上下文状态中存储看起来像 React 组件的东西时，你偏离了方向，你应该存储对象。对象应具有唯一的 GUID。这允许 reducer 识别要从状态中删除的对象元素。然后ObjectList 应该从存储的状态渲染派生的 React 组件。

我试图构建一个从 对象并以这种方式删除它，但键甚至返回为未定义 虽然它是从道具中解构出来的，我正在使用箭头 保存它的功能。

这是因为 React 键（和 refs）实际上并不是 props。无法在子组件中访问键。不过，您几乎可以通过任何其他命名道具传递相同的值。请注意以下解决方案中我传递了一个 React 键 和 一个 id 属性。

解决方案

ObjectCreator：创建对象，而不是 React 组件

const ObjectCreator = () => {
  const { addObj } = useContext(ObjContext);
  const createObj = () => {
    const obj = {
      id: uuid()
    };
    addObj(obj);
  };
  return <button onClick={createObj}>create an object!</button>;
};

SpecificObject：将其id 传递给removeObj 回调。

const MyObject = ({ id }) => {
  const { removeObj } = useContext(ObjContext);
  const removeSelf = () => {
    removeObj(id);
  };
  return (
    <div>
      <button onClick={removeSelf}>remove {id}</button>
    </div>
  );
};

ObjectList：渲染映射到 JSX 的上下文 objects。

const ObjectList = () => {
  const { objects } = useContext(ObjContext);
  return (
    <>
      {objects.map((el) => (
        <MyObject key={el.id} id={el.id} />
      ))}
    </>
  );
};

在remove object reducer中检查传递的id payload

const ObjReducer = (state, { type, payload }) => {
  switch (type) {
    case Types.ADD_OBJ:
      return {
        ...state,
        objects: [...state.objects, payload]
      };
    case Types.REMOVE_OBJ:
      return {
        ...state,
        objects: state.objects.filter((obj) => obj.id !== payload)
      };
    default:
      return state;
  }
};

演示