[英]React JS with redux-form with custom component
Found on redux from website the following example: 在网站上的redux上找到以下示例:
render() {
return (
<div>
<Field name="myField" component={props =>
<MyStrangeInput
currentValue={{val: props.value}}
thingsChanged={param => props.onChange(param.val)}/>
}/>
</div>
);
}
I understand that we pass MyStangeInput 2 arguments to the component, currentValue and thingsChanged. 我知道我们将MyStangeInput 2参数传递给组件,currentValue和thingsChanged。
currentValue been used and "value" and thingsChanged used as a method for "onChange" 使用currentValue并将“value”和thingsChanged用作“onChange”的方法
I would love the get explanation regarding the following syntax: 我希望得到有关以下语法的解释:
{{ val: props.value}} - is it passing an object? {{val:props.value}} - 是否传递了一个对象?
and 和
{param => props.onChange(param.val)} is it creating "param" arrow function? {param => props.onChange(param.val)}是否正在创建“param”箭头功能?
it's a little bit confusing 这有点令人困惑
currentValue={{val: props.value}}
is creating an object with a key val
and passing it to the MyStrangeInput
component as the currentValue prop. currentValue={{val: props.value}}
被创建带有键的对象val
并把它传递给MyStrangeInput
成分作为CurrentValue的道具。 The outer curly brackets mark the property value and the inner curly brackets define the object`. 外部花括号标记属性值,内部花括号定义对象`。 It would be also possible to create the object in the render method and just use it in the JSX context: 也可以在render方法中创建对象,并在JSX上下文中使用它:
props => {
const currentVal = { val: props.value};
return <MyStrangeInput
currentValue={currentVal}
thingsChanged={param => props.onChange(param.val)} />;
}
{param => props.onChange(param.val)}
indeed creates an arrow function with param as the first and only parameter. {param => props.onChange(param.val)}
确实创建了一个箭头函数,其中param作为第一个也是唯一的参数。 It is a shorthand notation for 这是一个简写符号
{(param) => {
return props.onChange(param.val);
}}
Actually there are two syntax shortcuts used here. 实际上这里使用了两种语法快捷方式。 First you can omit the brackets around the parameter list if there is only one parameter ( param
instead of (param)
) and second you can omit the curly brackets around the function body if you want to directly return the value of the only statement of the body ( props.onChange(param.val);
instead of { return props.onChange(param.val); }
) 首先,如果只有一个参数( param
而不是(param)
),则可以省略参数列表周围的括号;如果要直接返回函数体的唯一语句的值,则可以省略函数体周围的花括号。 body( props.onChange(param.val);
而不是{ return props.onChange(param.val); }
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.