2

次のコンポーネントが与えられます。これらの小道具、属性を取得して、この形式の別のコンポーネントに渡す方法を探しています。

<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 />て渡したい：adminHeaderJSON

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

これは可能ですか？

4

2 に答える 2

0

このようなことを意味しますか？

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。

于 2017-03-02T20:11:45.257 に答える