Javascript 作为JSX属性而不是对象传入对象属性

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

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

而不是像这样将属性转换为JSON：

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

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

---

这可能吗？

如果您想将

的属性传递给

您可以直接在道具上使用属性排列：

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

函数WrappedAdminHeader（道具）{
返回(
)
}

现在，您可以使用

作为

的替代品：

---

你的意思是这样的

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

const A=（{message}）=>{message}；
常数B=（{propsForA}）=>；
常数a=；
常量应用=（）=>(
{}
);
ReactDOM.render(
,
document.getElementById（“条目”）
);

---

你从

a

中获取道具，这是

a

的一个“实例”

谢谢，我已经意识到了这一点，这不是我要找的。你的第二个例子我不清楚。什么是

？我想我明白你的意思了。。。这与JSON无关，但您希望使用jsx节点和属性而不是对象文本来指定AdminHeader的道具。我认为这没有什么意义。您可以将AdminHeader作为道具传入，然后从props.children在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'
    />
  )}
/>

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