这是什么意思……在React JSX中休息

reactjs React.js

斯丁蛋蛋

2020-03-18

看看这个React Router Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow我看到PrivateRoute组件像这样破坏了一个休息道具

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我想确定这{ component: Component, ...rest }意味着：

从中props获取Component属性，然后再提供所有其他属性，然后重命名props为，rest这样就可以避免传递给Route render函数的属性的命名问题

我对吗？

第2169篇《这是什么意思……在React JSX中休息》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
null 2020.03.18

让我们保持简单。在javaScript中，如果键，值对相同，则obj = {account：account}与obj = {account}相同。因此，当道具从父组件传递到子组件时：

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

您将通过其余的道具 

label={label} placeholder={placeholder} type={type}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android