Как передать реквизит компоненту, выполненному в стиле Material UI? - PullRequest
Новая
       16

Как передать реквизит компоненту, выполненному в стиле Material UI?

0 голосов
/ 18 июня 2019

У меня есть компонент, который я бы тоже хотел передать, но у этого компонента также есть внутренние реквизиты для обработки стилей, и я не уверен, как справиться с обоими.

Это то, что у меня сейчас есть.

const styles = theme => ({
    // Theme building
});

const LoginLink = React.forwardRef((props, ref) => (
    <Link innerRef={ref} to="/login" {...props} />
));

const HomeLink = React.forwardRef((props, ref) => (
    <Link innerRef={ref} to="/" {...props} />
));

const NavBar = (props) => {

    const {classes} = props;

    // Some functions

    return(

        // Some code

        {props.isAuthenticated
                ? <Button color="inherit" onClick={handleLogout}>Logout</Button>
                : <Button color="inherit" component={LoginLink}>Login</Button>
        }
    );
}

NavBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NavBar);

И вот где я его использую: 

class App extends Component{

  constructor(props){
    super(props);

    this.state = {
      isAuthenticated: false,
      isAuthenticating: true
    };
  }

  // Functions

  render(){

    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated
    };

    return (
      !this.state.isAuthenticating &&
      <MuiThemeProvider theme={theme}>
        <div className = "App">
          <NavBar props={childProps} />
          <Routes childProps={childProps} />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Прямо сейчас это принимает реквизиты как «неопределенные».И, честно говоря, я понятия не имею, с чего начать добавление этого второго реквизита, так как я все еще довольно плохо знаком с даже node.js и веб-разработкой в ​​целом.

1 Ответ

2 голосов
/ 18 июня 2019

Вместо того, чтобы делать: 

<NavBar props={childProps} />

Вы можете выбрать распространение реквизиты: 

/*
 * Assuming eg: const childProps = {isAuthenticated: true};
 */
<NavBar {...childProps} />

Или вы можете просто назначить их прямо так: 

/*
 * Assuming eg: const isAuthenticated = true;
 */
<NavBar isAuthenticated={isAuthenticated} />
...