Question

我有以下代码段

return (
   <InputMask
         mask="99:99"
         *some other prop*
   >
    {(inputProps) => (
         <Input
            {...inputProps}
            onSubmit={*Does something*}
          />
   </InputMask>)

这是自定义组件的返回，我的问题是关于语法...如何在组件内部定义函数？呈现此组件时是否会调用此函数？该函数传递了什么（在这种情况下，InputProps是如何传递的以及它包含什么）？

您可以推断，前端开发和反应一般我还很陌生，因此任何指导或参考任何文档都将大有帮助！

Answer 1

首先，快速定义。这是我正在使用 children

的一些JSX：

<MyComponent>
   <b>
       This bold element
   </b>
   And this text are children of MyComponent.
</MyComponent>

内部MyComponent是常规的渲染方法，除了重要的是，它还具有props.children，它可以用它来做任何想做的事情：

render(){
   return <div className="my-component">{this.props.children}</div>;
}

重要的是，孩子就像其他道具一样是道具。它可以是任何您想要的东西，包括一个函数。如果组件希望向其未知子项提供一些信息，则此功能特别强大。一个很好的例子是某种迭代器：

<Loop over={[1,2,3]}>
   {item => <span>{item}</span>}
</Loop>

Loop组件正在调用this.children的地方，因为它希望它是一个函数：

render(){

   // For each item in the 'over' prop, call this.props.children
   return this.props.over.map(this.props.children);

}

从本质上来说，这就是您所拥有的-就该函数的运行时间和inputProps对象的含义而言，它完全取决于那个InputMask组件，但是几乎可以肯定，它将在呈现时运行它。

reactjs组件内部的功能

1 个答案: