javascript - 扩展父级中的子属性会引发只读异常

Question

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

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

但我的问题是 child ，以下抛出异常:

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