React Bootstrap验证使用子组件中的验证输入

Question

我正在使用react-bootstrap-validation来装饰react-bootstrap输入标记。

ValidatedInput要求它在Form组件中。 当我将ValidatedInput添加到自定义子组件时，我得到一个错误，说它需要在Form中，但是我想它现在在树的下方，所以看不到Form。

是否有一种引用父窗体的方法，以便ValidatedInput可以看到父窗体。

查看验证库的来源我可以看到ValidationInput需要注册到Form但不知道如何从子组件执行此操作。

{{1}}

Answer 1

目前这是不可能做到的。一旦我们在反应中获得适当的基于父的上下文，我将在未来的版本中进行，并且我将组件迁移到上下文。但是现在我建议将render()方法拆分为几个较小的方法并重复使用。

Answer 2

Sa @ВаняРешетников上面说过，由于当前设计的局限性，现在不可能这样做。我找到的解决方案就是这个。

1. 将子组件转换为普通JS对象

   TitleSelect = {
     // move prop types to parent
     renderTitleSelect(){
       ...
     }
   }
   

2. 将新对象作为mixin添加到父级并呈现函数

   mixins: [TitleSelect],
   ...
   render() {
     <Form ...>
       // parentheses are important!
       {this.renderTitleSelect()}
     </Form>
   }