Question

我正在制作一个npm包来验证元素，我需要实现以下语法才能真正有用且简单：

<validationLibrary type="numeric">
  <input type="text" placeholder"Sample 123">
</validationLibrary>

但我的问题在于孩子，以下引发了异常：

React.Children.map(this.props.children,function(child,i){
       child.props.onChange = function (event) {
         isNumeric(event.target.value);
       }
     })

我的目标是让库强制孩子执行我的库的方法，这样用户就不必执行一些配置步骤来使其工作。

任何帮助？

编辑： 解决方案：

   let copies = React.Children.map(this.props.children,(child,i) =>{
       let copy = React.cloneElement(child,{onChange:function () {
         console.log("i overrode the default behaviour");
       }});
       return copy;
     })

    return <div>{copies}</div>;

Answer 1

自React v0.14起，props被冻结，这意味着你不能改变它们。

FMI：https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#breaking-changes

因此，您可以为每个孩子返回新元素。在您的情况下，您将克隆元素并添加新的prop以处理onChange。您可以使用React.cloneElement：

实现这一目标

https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement

在父抛出中扩展子属性只读异常

1 个答案: