Question

我也有一个要传递道具的组件，但是这个组件也有内部道具来处理样式，我不确定如何同时处理这两个。

这是我目前拥有的。

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和一般的Web开发还是很陌生的。

Answer 1

代替：

<NavBar props={childProps} />

您可以选择传播道具：

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

或者您可以像这样直接分配它们：

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

如何将道具传递给具有用户界面风格的组件？

1 个答案: