26

这是来自 ReactJS 的新入门者。容易掌握的资源不可用促使我再次敲门。问题是这样的。我有一个 React 组件，RegisterAccount当单击它时会发射另一个组件（弹出窗口），允许用户填写注册帐户所需的详细信息。现在一旦成功注册了一个帐户，我想将注册的帐户作为另一个组件添加到RegisterAccount. 如何设置此通信？

//In RegisterAccount
<addAccount/> //pop-up
<accountAdded/> //if account added, then show this component
4

4 回答 4

28

我是反应新手。我也在寻找方法。我看到了这篇文章！它说如下

render : function()
{
    return (
        <div>
        { true && <AddAccount /> }
        { false && <AccountAdded /> }
        </div>
    );
}
于 2016-01-23T02:54:09.707 回答
18

如果我正确理解您的问题，您正在尝试更新在状态更改时要显示的组件（例如，用户创建帐户），并且该状态由子组件更改。这是一个显示子 -> 父通信的基本示例。

在这种情况下，该RegisterAccount组件是根组件。如果它是另一个组件的子组件，也需要知道hasAccount此示例中使用的状态，那么状态可能会更好地存储在链的更高位置（并作为道具向下传递）。

这个例子的jsfiddle

/** @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);
于 2014-01-23T03:00:52.287 回答
3

您还可以执行以下操作，根据返回 true 或 false 的属性条件，您可以渲染或不渲染。这只是一个例子，条件也可能来自方法等：

export class MyClass extends React.Component{
    ...
    render(){
            <div>
                <img src='someSource' />
                {this.state.condition ? <MyElement /> : null}
            </div>
    }
}

您还可以在此处找到更详细的信息。

于 2017-09-13T15:03:38.433 回答
2

在您的渲染函数中，您可以有一个带有条件显示的标签的变量......有点像这样：

render: function(){
   var conditionalTag;
   if(conditionalTag)   <AccountAdded/>

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

仅当变量中包含 jsx 时才会呈现 conditionalTag

于 2014-09-08T18:01:10.153 回答