如何在React中将prop绑定到组件

Question

给出以下组件

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

Answer 1

如何拿起道具并向下传递：

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

Answer 2

React组件是不可变的，因此一旦创建了组件，就不能更改道具。要更新道具，我们必须使用React.cloneElement()，如此

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

此解决方案与acdcjunior类似，但它不需要B导入A.这也使B可以一般接受组件而不接受组件和组件的实例