react 渲染子组件求解?

嘻倪孢
  • 299

antd 文档地址 https://ant.design/components...
我用方式一,能实现
这个功能, props接受的是value 和onchange

我用方式二就不能接受到props的onchange, value。只能接受到父级的props。
两个props不一样

function Text (props) {
  return <input {...props} />
}

function Parent (props) {
   // 方式一
   const Child = props.child
   retrun <Form.Item>
     <Child {...props} />
   </Form.Item>
   // 方式二
   return <Form.Item>
     {props.child({...props})}
   </Form.Item>
}

<Parent child={Text} />
回复
阅读 261
1 个回答
✓ 已被采纳

ant-design所依赖的基础库是 rc-component,请查看对应rc-field-form源码 585行以及上面的468行

这里已经很清楚了,如果传入的是一个函数,则会进行调用之后,判断当返回值是一个 react.reactElement 才会进行props的包裹,否则不会进行任何props混入(cloneElement之类的处理)

如果按上述的例子来看,第二种方式 child中获取的当然是父组件的props,因为是函数传参,而它的返回值jsx部分则会被加入onchange,value

希望我的表述没有问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏