javascript - 使用带有自定义组件的 redux-form react JS

Question

从网站上的 redux 上找到以下示例:

render() {
  return (
    <div>
      <Field name="myField" component={props =>
        <MyStrangeInput 
          currentValue={{val: props.value}}
          thingsChanged={param => props.onChange(param.val)}/>
      }/>
    </div>
  );
}

我知道我们将 MyStangeInput 2 参数传递给组件、currentValue 和 thingsChanged。

currentValue 已被使用，“value”和 thingsChanged 被用作“onChange”的方法

我希望获得有关以下语法的解释:

{{ val: props.value}} - 它传递的是一个对象吗？

和

{param => props.onChange(param.val)} 是否创建了“param”箭头函数？

有点乱

Answer 1

currentValue={{val: props.value}} 正在创建一个带有键 val 的对象并将其传递给 MyStrangeInput 组件作为 currentValue Prop 。外大括号标记属性值，内大括号定义对象。也可以在 render 方法中创建对象，然后只在 JSX 上下文中使用它:

props => {
        const currentVal = { val: props.value};
        return <MyStrangeInput 
          currentValue={currentVal}
          thingsChanged={param => props.onChange(param.val)} />;
}

{param => props.onChange(param.val)} 确实创建了一个箭头函数，其中 param 作为第一个也是唯一的参数。它是

的简写符号

{(param) => {
  return props.onChange(param.val);
}}

实际上这里使用了两个语法快捷方式。首先，如果只有一个参数(param 而不是 (param))，您可以省略参数列表周围的括号，其次，您可以省略函数主体周围的大括号如果你想直接返回body唯一语句的值(props.onChange(param.val);而不是{ return props.onChange(param.val); } )