将附加道具传递给功能组件

Question

我有一个这样的星座：

<AComponent>
  foo={{bar: AFunctionalComponent}}
</AComponent>

export default function AFunctionalComponent({
  // These are props that will get passed "automatically" by 'AComponent'
  foo, 
  bar, 
  baz
}) 
{...}

现在我想向 AFunctionalComponent 传递一个额外的 prop。我该怎么做？

Answer 1

我不确定，但我认为你想实现这样的目标：

import React from 'react';

export function AFunctionComponent({myPropA, myPropB}){
  return <p>Hello myPropA: '{myPropA}', myPropB: '{myPropB}'</p>;
}

export function AComponent({Comp}){
  return <div>
    Component: <Comp myPropB="B from Component"/>
  </div>
}

export function App(props) {
  const ProxyComp = (proxyProps) => <AFunctionComponent {...proxyProps} myPropA="A from Proxy" />
  return (
    <div className='App'>
      <AComponent Comp={ProxyComp} />
    </div>
  );
}

通过定义“代理”组件，您可以传递自定义参数。