reactjs - React.cloneElement 克隆已经克隆的元素以添加新的 Prop

Question

我有 TestWrapper克隆 element 的组件并且应该使背景变为蓝色。 Test也在做同样的事情，但设置 color .我期待渲染的元素有蓝色背景和红色文本，但它只是 red .这是示例:

const Test: React.FC<{ element: React.ReactElement }> = ({ element }) => {
  return React.cloneElement(element, {
    const isSelected = useIsSelected();
    style: { ...element.props.style, color: isSelected ? 'red' : 'black' }
  });
};

const TestWrapper: React.FC<{ element: React.ReactElement }> = ({
  element
}) => {
  // BackgroundColor is blue
  const { backgroundColor } = useTheme();
  return React.cloneElement(element, {
    style: { ...element.props.style, background: backgroundColor }
  });
};

export function App() {
  return <TestWrapper element={<Test element={<h1>Heading</h1>} />} />;
}

我怎样才能做到这一点？我可以这样做，但我必须能够从 Test 访问 Hook 方法和 TestWrapper .
简单的代码框示例: https://codesandbox.io/s/serene-bassi-ve1ym?file=/src/App.tsx

Answer 1

在 TestWrapper您正在克隆 Test组件并应用您的style它的 Prop ，它们不会被传递给它正在克隆自己的元素。仅仅返回一个克隆的元素不会创建一个引用相等，对组件做某事会影响它正在克隆的元素。您需要提供 style支持 Test并将其传递给被克隆的元素:

const Test: React.FC<{
  style?: React.CSSProperties;
  element: React.ReactElement;
}> = ({ element, style }) => {
  return React.cloneElement(element, {
    style: { ...element.props.style, ...style, color: "red" }
  });
};

我做了一个 fork here .希望这会有所帮助!