Как загрузить компоненты условно в ReactJS

Это от нового стартера ReactJS. Недоступность легкодоступных ресурсов побудила меня снова постучать в SO. Проблема в этом. У меня есть компонент React, а именно RegisterAccount, который при щелчке снимает другой компонент (всплывающее окно), позволяя пользователям заполнить необходимые данные для регистрации учетной записи. Теперь, когда учетная запись успешно зарегистрирована, я хочу добавить зарегистрированную учетную запись в качестве другого компонента под RegisterAccount. Как я могу настроить эту связь?

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

Ответ 1

Я новичок в React. Я также узнал, как это сделать. и я увидел эту статью ! Он говорит, как belows

render : function()
{
    return (
        <div>
        { true && <AddAccount /> }
        { false && <AccountAdded /> }
        </div>
    );
}

Ответ 2

Если я правильно понял ваш вопрос, вы пытаетесь обновить компонент, который будет отображаться при изменении состояния (например, пользователь создает учетную запись), при этом это состояние будет изменено дочерним компонентом. Вот базовый пример, показывающий дочернюю → родительскую связь.

В этом случае компонент 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);

Ответ 3

В вашей функции рендеринга вы можете иметь переменную с вашим тегом, который условно отображается... вроде как:

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

   return (
      <AddAccount/>
      { conditionalTag } 
   )

}

conditionalTag будет отображаться только в том случае, если переменная имеет jsx в ней

Ответ 4

Вы также можете сделать следующее и в зависимости от свойства , возвращающего true или false, которое вы можете отобразить или нет. Это просто пример, условие может также исходить из метода и т.д. И т.д.:

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

вы также можете найти более подробную информацию здесь.