这是来自 ReactJS 的新手。容易掌握的资源不可用促使我再次敲打 SO。问题是这个。我有一个 React 组件，RegisterAccount当点击它时会弹出另一个组件（弹出窗口），允许用户填写所需的详细信息以注册帐户。现在一旦成功注册了一个帐户，我想将注册的帐户添加为RegisterAccount. 我该如何设置这种通信？
//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component
我是 React 的新手。我也在寻找方法。我看到了这篇文章！它说如下
render : function()
{
return (
<div>
{ true && <AddAccount /> }
{ false && <AccountAdded /> }
</div>
);
}
如果我正确理解您的问题，那么您正在尝试更新状态更改时要显示的组件（例如，用户创建帐户），该状态由子组件更改。这是一个显示孩子 - > 家长交流的基本示例。
在这种情况下，RegisterAccount组件是根组件。如果它是另一个组件的子组件，也需要知道hasAccount本示例中使用的状态，那么状态可能最好存储在链的更高位置（并作为props传递）。
/** @jsx React.DOM */
var AddAccount = React.createClass({
handleRegistration: function() {
this.props.updateAccount(true);
},
render: function() {
return <a onClick={this.handleRegistration}>Create my account</a>;
}
});
var AccountAdded = React.createClass({
render: function() {
return <span>Account exists now</span>;
}
});
var RegisterAccount = React.createClass({
getInitialState: function() {
return {
hasAccount: false
};
},
updateAccountStatus: function(status) {
this.setState({
hasAccount: status
});
},
render: function() {
return (
<div>
{this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />}
</div>
);
}
});
React.renderComponent(<RegisterAccount />, document.body);
您还可以执行以下操作，根据返回 true 或 false的属性条件，您可以呈现或不呈现。这只是一个例子，条件也可能来自方法等……：
export class MyClass extends React.Component{
...
render(){
<div>
<img src='someSource' />
{this.state.condition ? <MyElement /> : null}
</div>
}
}
您还可以在此处找到更多详细信息。
在你的渲染函数中，你可以有一个带有条件显示的标签的变量......有点像这样：
render: function(){
var conditionalTag;
if(conditionalTag) <AccountAdded/>
return (
<AddAccount/>
{ conditionalTag }
)
}
conditionalTag 只会在变量中包含 jsx 时呈现