将对象道具作为 JSX 属性而不是对象传递

Posted 2023-02-22

【中文标题】将对象道具作为 JSX 属性而不是对象传递

【英文标题】：Pass in object prop as JSX attributes instead of object

【发布时间】：2017-07-22 17:01:54

【问题描述】：

给定以下组件。我正在寻找一种方法来获取这些道具、属性并将它们以这种格式传递给另一个组件。

<AdminHeader
  logoSource='https://dummyimage.com/85x85/c718de/ffffff'
  leftStyle=flexGrow: 2
  centerText='Painel De Administração · Clientes'
  rightStyle=flexBasis: 'content', flexGrow: 0
  right=(
    <AdminNotification
      imageSource='https://dummyimage.com/65x85/a8a8a8/000000.png'
      circleScheme='red'
      count=21
      text='Admin Master'
    />
  )
/>

例如，假设我像这样包装<AdminHeader/>：

function WrappedAdminHeader (props) 
  return (
    <AdminHeader ...props.adminHeader/>
  )

然后我想调用<WrappedAdminHeader /> 并传入adminHeader 道具，而不必将它们全部转换为JSON：

<WrappedAdminHeader
  adminHeader=(
    <ResolveToJSON
      logoSource='https://dummyimage.com/85x85/c718de/ffffff'
      leftStyle=flexGrow: 2
      centerText='Painel De Administração · Clientes'
      rightStyle=flexBasis: 'content', flexGrow: 0
      right=(
        <AdminNotification
          imageSource='https://dummyimage.com/65x85/a8a8a8/000000.png'
          circleScheme='red'
          count=21
          text='Admin Master'
        />
      )
    />
  )
/>

然后必须像这样将属性转换为 JSON：

<WrappedAdminHeader adminHeader=
  logoSource: 'https://dummyimage.com/85x85/c718de/ffffff',
  leftStyle: flexGrow: 2,
  centerText: 'Painel De Administração · Clientes',
  rightStyle: flexBasis: 'content', flexGrow: 0,
  right:(
    <AdminNotification
      imageSource='https://dummyimage.com/65x85/a8a8a8/000000.png'
      circleScheme='red'
      count=21
      text='Admin Master'
    />
  )
>

这可能吗？

【问题讨论】：

你的第二个例子我不清楚。 <ResolveToJSON> 是什么？

我想我明白你在说什么......这与 JSON 无关，但你想使用 jsx 节点和属性而不是对象文字来指定 AdminHeader 的道具。我认为这没有任何意义。您可以将 AdminHeader 作为道具传入，然后从 props.children 在 WrappedAdminHeader 中呈现它。

【参考方案1】：

如果您的意思是要将<WrappedAdminHeader> 的属性传递给<AdminHeader>，您可以直接在道具上使用属性传播：

function WrappedAdminHeader (props) 
  return (
    <AdminHeader ...props/>
  )

现在您可以使用<WrappedAdminHeader> 作为<AdminHeader> 的直接替代品：

<WrappedAdminHeader
  logoSource='https://dummyimage.com/85x85/c718de/ffffff'
  leftStyle=flexGrow: 2
  centerText='Painel De Administração · Clientes'
  rightStyle=flexBasis: 'content', flexGrow: 0
  right=(
    <AdminNotification
      imageSource='https://dummyimage.com/65x85/a8a8a8/000000.png'
      circleScheme='red'
      count=21
      text='Admin Master'
    />
  )
/>

【讨论】：

谢谢你，我已经知道了，这不是我要找的。​​span>

【参考方案2】：

你的意思是这样的？

const A = ( message ) => <span>message</span>;
const B = ( propsForA ) => <A ...propsForA />;

const a = <A message="Hi!" />;    

const App = () => (
  <div><B propsForA=a.props /></div>
);

ReactDOM.render(
  <App />,
  document.getElementById("entry")
);

您从a 获取道具的位置，这是A 的“实例”。