使用带有自定义组件的redux-form来实现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的道具。 外部花括号标记属性值，内部花括号定义对象`。 也可以在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); } ）