Javascript 使用React和Material UI创建动态标题UI

在我的header.jsx文件中，我有：

// Default Import Statements go here
var Login = require(login.jsx)
const HeaderComponent = React.createClass({

  getInitialState () {
    return {
      loggedIn: false,
    };
  },
  render() {
    return (
      <Toolbar>
        <ToolbarGroup key={1} float="right">
          <Login />
        </ToolbarGroup>
      </Toolbar>
    );
  }
});

module.exports = HeaderComponent;

//默认导入语句位于此处
var Login=require（Login.jsx）
const HeaderComponent=React.createClass({
getInitialState（）{
返回{
洛格丁：错，
};
},
render（）{
返回(
);
}
});
module.exports=头组件；

在我的登录组件（Login.jsx）中：

//默认导入语句
var LoginDialog=React.createClass({
render（）{
返回(
);
},
_submitTouchTap:函数（）{
var primaryEmail=this.refs.email.getValue（）；
var password=this.refs.password.getValue（）；
风险值数据={
primaryEmail:primaryEmail，
密码：密码
};
$.ajax({
url:“/login”，
数据类型：“json”，
键入：“post”，
数据：数据，
成功：功能（数据）{
控制台日志（数据）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
this.transitiono（'/login'）；
}.绑定（此）
});
this.refs.loginDialog.setState（{open:false}）；
},
_cancelTouchTap:函数（）{
this.refs.loginDialog.setState（{open:false}）；
},
_handleTouchTap（）{
this.refs.loginDialog.setState（{open:true}）；
}
});
module.exports=LoginDialog；

当用户登录时，一旦ajax调用返回成功，我想将标题的

loggedIn

状态切换为true。但是，我不太确定如何将数据从单独的文件（child login.jsx）传递到父文件（header.jsx）中。有人知道我如何做到这一点，以便为标题创建动态UI吗

---

一旦用户登录到loggedIn的状态，header组件应返回true。一旦这是真的，我将显示一个不同的标题比目前显示的

您可以使用回调：

var Login = require(login.jsx)
const HeaderComponent = React.createClass({

  getInitialState () {
    return {
      loggedIn: false,
    };
  },
  render() {
    return (
      <Toolbar>
        <ToolbarGroup key={1} float="right">
          <Login onLoggedIn={this._handleLogIn}/>
        </ToolbarGroup>
      </Toolbar>
    );
  },
  _handleLogIn: function (data) {
    console.log(data);
    this.setState({loggedIn: true});
  }
});

module.exports = HeaderComponent;

var LoginDialog = React.createClass({

  render() {
    return (
      <div>
        <Dialog
          title="Login"
          ref="loginDialog"
          autoScrollBodyContent = {true}
          onRequestClose={this._cancelTouchTap}
          open={this.state.open}>
          <form action="/login" method="post" autoComplete="off">
            <div>
              <TextField hintText="Email Field" ref = "email" />
            </div>
            <div>
              <TextField hintText="Password" type="password" ref = "password"/>
            </div>
            <div>
              <RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/>
              <RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/>
            </div>
          </form>
        </Dialog>

        <FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} />

      </div>
    );
  },

  _submitTouchTap: function(){
    var primaryEmail = this.refs.email.getValue();
    var password = this.refs.password.getValue();
    var data = {
      primaryEmail: primaryEmail,
      password: password
    };
    $.ajax({
      url: '/login',
      dataType: 'json',
      type: 'post',
      data: data,
      success: function(data) {
        console.log(data);
        this.props.onLoggedIn(data);
      }.bind(this),
      error: function(xhr, status, err) {
        this.transitionTo('/login'); 
      }.bind(this)
    });
    this.refs.loginDialog.setState({open: false});
  },

  _cancelTouchTap: function(){
    this.refs.loginDialog.setState({open: false});
  },

  _handleTouchTap() {
    this.refs.loginDialog.setState({open: true});
  }
});
module.exports = LoginDialog;

var Login=require（Login.jsx）
const HeaderComponent=React.createClass({
getInitialState（）{
返回{
洛格丁：错，
};
},
render（）{
返回(
);
},
_handleLogIn：函数（数据）{
控制台日志（数据）；
this.setState（{loggedIn:true}）；
}
});
module.exports=头组件；
var LoginDialog=React.createClass({
render（）{
返回(
);
},
_submitTouchTap:函数（）{
var primaryEmail=this.refs.email.getValue（）；
var password=this.refs.password.getValue（）；
风险值数据={
primaryEmail:primaryEmail，
密码：密码
};
$.ajax({
url:“/login”，
数据类型：“json”，
键入：“post”，
数据：数据，
成功：功能（数据）{
控制台日志（数据）；
this.props.onLoggedIn（数据）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
this.transitiono（'/login'）；
}.绑定（此）
});
this.refs.loginDialog.setState（{open:false}）；
},
_cancelTouchTap:函数（）{
this.refs.loginDialog.setState（{open:false}）；
},
_handleTouchTap（）{
this.refs.loginDialog.setState（{open:true}）；
}
});
module.exports=LoginDialog；

您可以使用回调：

var Login = require(login.jsx)
const HeaderComponent = React.createClass({

  getInitialState () {
    return {
      loggedIn: false,
    };
  },
  render() {
    return (
      <Toolbar>
        <ToolbarGroup key={1} float="right">
          <Login onLoggedIn={this._handleLogIn}/>
        </ToolbarGroup>
      </Toolbar>
    );
  },
  _handleLogIn: function (data) {
    console.log(data);
    this.setState({loggedIn: true});
  }
});

module.exports = HeaderComponent;

var LoginDialog = React.createClass({

  render() {
    return (
      <div>
        <Dialog
          title="Login"
          ref="loginDialog"
          autoScrollBodyContent = {true}
          onRequestClose={this._cancelTouchTap}
          open={this.state.open}>
          <form action="/login" method="post" autoComplete="off">
            <div>
              <TextField hintText="Email Field" ref = "email" />
            </div>
            <div>
              <TextField hintText="Password" type="password" ref = "password"/>
            </div>
            <div>
              <RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/>
              <RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/>
            </div>
          </form>
        </Dialog>

        <FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} />

      </div>
    );
  },

  _submitTouchTap: function(){
    var primaryEmail = this.refs.email.getValue();
    var password = this.refs.password.getValue();
    var data = {
      primaryEmail: primaryEmail,
      password: password
    };
    $.ajax({
      url: '/login',
      dataType: 'json',
      type: 'post',
      data: data,
      success: function(data) {
        console.log(data);
        this.props.onLoggedIn(data);
      }.bind(this),
      error: function(xhr, status, err) {
        this.transitionTo('/login'); 
      }.bind(this)
    });
    this.refs.loginDialog.setState({open: false});
  },

  _cancelTouchTap: function(){
    this.refs.loginDialog.setState({open: false});
  },

  _handleTouchTap() {
    this.refs.loginDialog.setState({open: true});
  }
});
module.exports = LoginDialog;

var Login=require（Login.jsx）
const HeaderComponent=React.createClass({
getInitialState（）{
返回{
洛格丁：错，
};
},
render（）{
返回(
);
},
_handleLogIn：函数（数据）{
控制台日志（数据）；
this.setState（{loggedIn:true}）；
}
});
module.exports=头组件；
var LoginDialog=React.createClass({
render（）{
返回(
);
},
_submitTouchTap:函数（）{
var primaryEmail=this.refs.email.getValue（）；
var password=this.refs.password.getValue（）；
风险值数据={
primaryEmail:primaryEmail，
密码：密码
};
$.ajax({
url:“/login”，
数据类型：“json”，
键入：“post”，
数据：数据，
成功：功能（数据）{
控制台日志（数据）；
this.props.onLoggedIn（数据）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
this.transitiono（'/login'）；
}.绑定（此）
});
this.refs.loginDialog.setState（{open:false}）；
},
_cancelTouchTap:函数（）{
this.refs.loginDialog.setState（{open:false}）；
},
_handleTouchTap（）{
this.refs.loginDialog.setState（{open:true}）；
}
});
module.exports=LoginDialog；

您可以使用从父组件传递到子组件的回调函数，并将数据作为该回调函数的参数发送。对吗？您可以使用从父组件传递到子组件的回调，并将数据作为此回调的参数发送。对吗？是的，但是如果它们在不同的文件中，我仍然可以使用回调吗？是的，它们在不同的文件中没有问题。很酷，谢谢，我想我明白了，你知道当

loggedIn

的状态设置为true时，我如何更改头组件吗？基本上，我可以如何将

的当前内容切换到其他内容？每次更改状态时，都会调用渲染函数。因此，由于您的状态中有一个布尔值，您可能希望执行某种条件渲染。看：是的，但是如果它们在不同的文件中，我还可以使用回调吗？是的，它们在不同的文件中没有问题。很酷，谢谢，我想我明白了，你知道我怎么做吗