オブジェクトの代わりにJSX属性としてobject propを渡します。

Question

次のコンポーネントがあるとします。私はこれらの小道具、属性を取って、この形式で別のコンポーネントに渡す方法を探しています。例えば

<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 />を呼び出し、JSONにそれらすべてを変換することなくadminHeader小道具に渡したい：

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

これは可能ですか？

Answer 1

あなたが意味する場合は、あなただけの小道具に直接広がっ属性を使用することができます<WrappedAdminHeader>の属性は<AdminHeader>に渡されたい：

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

今、あなたはドロップイン<AdminHeader>の代替として<WrappedAdminHeader>を使用することができます。

<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

このような意味ですか？あなたがAの「インスタンス」であるaから小道具を取る

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

。