javascript - 如何将prop绑定(bind)到React中的组件

鉴于以下组成部分

const A = ({prop1,prop2}) => (
    <div>{prop1 + ' ' + prop2}</div>
)

如何绑定/创建curry prop1的闭包？换句话说，编写以下内容以使A获得{prop1:'prop1!',prop2:'prop2!'}的正确方法是什么

const B = ({BoundA}) => (
    <div><BoundA prop2 = 'prop2!' /></div>
)

<B A = {<A prop1 = 'prop1!' />} />

最佳答案

只是拿起道具然后像这样传下去怎么样？

<div><A prop1={BoundA.props.prop1} prop2='prop2!' /></div>

例：

const B = ({ BoundA }) => (
  <div><A prop1={BoundA.props.prop1} prop2='prop2!' /></div>
)

<B BoundA={<A prop1='prop1!' />} />

而且，如果要重用在<A />中传递的<B BoundA={<A实例，则不能。您将无法向现有元素添加道具。

如果您做了类似的事情：

const B = ({ BoundA }) => {
  BoundA.props.prop2 = 'new prop prop2';
  return <div>{ BoundA }</div>
};

您会得到：


  TypeError无法添加属性prop2，对象不可扩展。


因此，如果您有几个道具，则可以选择使用React.cloneElement()：

const B = ({ BoundA }) => (
  <div>{ React.cloneElement(BoundA, {prop2: 'prop2!' }) }</div>
)

<B BoundA={<A prop1='prop1!' />} />

关于javascript - 如何将prop绑定(bind)到React中的组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49578930/