Übergabe in Objekt-Prop als JSX-Attribute anstelle von Objekt

Question

Angesichts der folgenden Komponente. Ich suche nach einer Möglichkeit, diese Requisiten und Attribute zu verwenden und sie an eine andere Komponente in diesem Format weiterzugeben.

<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' 
    /> 
)} 
/> 

Zum Beispiel lassen Sie uns ich <AdminHeader/> wie diese wickeln sagen:

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

Dann möchte ich <WrappedAdminHeader /> anrufen und in adminHeader Requisiten passieren, ohne sie alle zu JSON umwandeln zu müssen:

<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' 
     /> 
    )} 
    /> 
)} 
/> 

Anstatt die Attribute wie folgt in JSON konvertieren zu müssen:

<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' 
    /> 
)}} 
}> 

Ist das möglich?

Answer 1

Wenn Sie meinen, wollen Sie die Attribute von <WrappedAdminHeader> zu <AdminHeader> weitergegeben werden Sie nur Attribut verteilt direkt auf die Requisiten verwenden:

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

Jetzt können Sie <WrappedAdminHeader> als Drop-in-Ersatz für <AdminHeader> verwenden:

<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' 
    /> 
)} 
/> 

Answer 2

Sie meinen etwas wie das?

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") 
); 

Wo Sie die Requisiten aus a nehmen, die eine „Instanz“ von A ist.