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

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

val

MyStrangeInput实际上创建了一个以param作为第一个也是唯一的参数的箭头函数。这是

的简写

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

实际上，这里使用了两个语法快捷方式。首先，如果只有一个参数（{param => props.onChange(param.val)}而不是{(param) => { return props.onChange(param.val); }}），则可以省略参数列表的方括号；第二，如果要直接返回值，可以省略函数主体的花括号。正文的唯一陈述（param而非(param)）

使用带有自定义组件的redux-form反应JS

1 个答案: