Question

刚开始使用react-router。

当我在react-router@next（底部）遇到这段代码时，我正在使用github（版本4）。我有弱的React + ES6-fu因此需要你的帮助。

这里{... props}是否指向组件发送道具？
{... props}如何影响custom =＆＃34; prop＆＃34;？

ž

<Match pattern="/foo" 
       render={(props) => ( 
         <YourRouteComponent {...props} custom="prop"/> 
       )} 
/>

Answer 1

考虑以下示例：

props = {
    propA: "valueA",
    propB: "valueB",
    propC: "valueC"
};

然后，

<SomeComponent {...props} />

相当于

<SomeComponent propA="valueA" propB="valueB" propC="valueC" />

<SomeComponent {...props} propC="someOtherValue" />

相当于

<SomeComponent propA="valueA" propB="valueB" propC="someOtherValue" />

另请注意

<SomeComponent propC="someOtherValue" {...props} />

将成为

<SomeComponent propA="valueA" propB="valueB" propC="valueC" />

订单很重要。

详细了解JSX Spread Operator ...

Answer 2

这是更实际的例子。假设您已经开发了一个非常基本的（为了简化本文）可重用的<TextInput/>组件，并且想在整个应用程序中重用它。定义是这样的。

function TextInput({htmlId, name, type="text", ...props}){
    return(
        <div>
            <input
                id={htmlId}
                name={name}
                type={type}
                {...props}
            />
        </div>
    )
}

在这里，您正在实现上述组件。

class ExampleOptional extends React.Component{
    render(){
        return(
            <TextInput
                htmlId="name"
                name="firstName"
                text="text"

                /** Props(place="XYZ & state="ABC") below are defined and destructured in TextInput 
                 Definition because there is {...props} defined in TextInput 
                 definition, if there is no {...props} in definition, no other than id, name & type 
                 props will be handled  */

                place="XYZ"
                state="ABC"
            />
        )
    }
}

因此，如果将“ htmlId，名称和文本” 以外的任何内容提供给TextInput作为prop，它将由您在TextInput组件定义中定义的{... props}处理。否则，它将不在TextInput的DOM中。（如下面的图片所示，原始TextInput组件定义中未定义的位置和状态道具会自动处理）

注意：：无论道具是否已解构（{... props}），您都可以在Chrome的开发人员工具的“组件”标签中找到所有传递的道具。

这个React组件中的{... props}是什么意思？

2 个答案: