从网站上的 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”箭头函数?
有点乱
最佳答案
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); }
)
关于javascript - 使用带有自定义组件的 redux-form react JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53098160/