2016-05-20 4 views
1

Я новичок, чтобы реагировать, так что это то, чего я не знаю. В приложении, которое работает с ним, есть основной компонент, где загружаются другие компоненты.Связь между компонентами React

Подобно этому,

render() { 
    return (
     <div className="index"> 
     <HeaderComponent /> 
     <MainHeroComponent /> 
     <AboutComponent /> 
     </div> 
    ); 
    } 

И я хочу, когда кто-то нажимает на ссылку в HeaderComponent, чтобы показать компонент о. И скройте MainHeroComponent. Как я могу выполнить такую ​​связь между компонентами в React? Возможно ли это?

Благодаря

+0

реквизиты и обратный вызов сделают трюк для вас :) – Amit

ответ

1

Использование React-Router и создать routes для этого сценария вместо прямой связи между компонентами. Пример структуры приложения, используя реагировать-маршрутизатор

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <HeaderComponent /> 
     </div> 
    ) 
    } 
}) 

render((
    <Router> 
    <Route path="/" component={App}> 
     <Route path="hero" component={MainHeroComponent} /> 
     <Route path="about" component={AboutComponent} /> 
    </Route> 
    </Router> 
), document.body) 

Для получения более подробной информации о маршрутизаторе см: https://github.com/reactjs/react-router/blob/master/docs/guides/RouteConfiguration.md

+0

Я думаю, что использование React router - лучший вариант, а затем связь между компонентом для такой вещи :) Я думал об избежании использования реагирующего маршрутизатора, но учитывая, насколько это просто, я думаю, это это лучший вариант. – rksh

0

ответ Адитья является, вероятно, лучшим решением, но если вы действительно хотите к ней свой путь, вы можете использовать состояние и обратные вызовы ,

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showHero: true 
    }; 
    this.toggleShowHero = this.toggleShowHero.bind(this); 
    } 
    toggleShowHero() { 
    this.setState({ 
     showHero: !this.state.showHero 
    }); 
    } 
    render() { 
    return (
     <div className="index"> 
     <HeaderComponent onClick={toggleShowHero}/> 
     { 
      this.state.showHero ? 
      <MainHeroComponent /> : 
      <AboutComponent /> 
     } 
     </div> 
    ); 
} 
0

Существуют различные способы, вы можете добиться этого, в том числе React-маршрутизаторы и Redux, но так как вы новичок в React, это будет хорошо, если вы освоитесь с основами в первую очередь. Для начала вам необходимо изменить состояние основного компонента, чтобы решить, какой дочерний компонент должен отображаться.

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

/* in the main component */ 
constructor(props) { 
    super(props); 
    this.state = { 
    showAbout: true 
    }; 
} 

Затем измените функцию визуализации следующим образом, чтобы передать ссылку на ваш основной компонент, вплоть до вашего заголовка компонент:

/* in the main component */ 
<HeaderComponent mainComponent={this}/> 

Затем в HeaderComponent присоедините обработчик событий нажмите на ссылку, на которую вы хотите выполнить операцию.

/* in HeaderComponent */ 
<a href="#" ....... onClick={this.showAbout.bind(this)}>Show About</a> 

В том же компоненте, определим функцию showAbout следующим образом:

/* in HeaderComponent */ 
showAbout() { 
    let mainComponent = this.props.mainComponent; 
    mainComponent.setState({ 
    showAbout: true 
)}; 
} 

Наконец, еще в функции визуализации основного компонента:

/* in the main component */ 
render() { 
    let mainHeroComponent, aboutComponent; 
    if (this.state.showAbout) { 
    aboutComponent = (
     <AboutComponent/> 
    ); 
    } else { 
    mainHeroComponent = (
     <MainHeroComponent/> 
    ); 
    } 

    return (
    <div className="index"> 
     <HeaderComponent mainComponent={this}/> 
     {mainHeroComponent} 
     {aboutComponent} 
    </div> 
); 
} 

И вы сделали ! В принципе, компонент получает повторную визуализацию каждый раз, когда изменяется его состояние. Поэтому каждый раз, когда вы нажимаете на ссылку, состояние основного компонента изменяется с новым значением showAbout. Это приведет к тому, что основной компонент повторно отобразит себя, и, основываясь на значении showAbout, он решит, следует ли отображать MainHeroComponent или AboutComponent.

Но вы должны убедиться, что у вас есть аналогичная логика для отображения MainHeroComponent, а не AboutComponent, просто чтобы переключить представления.

+0

Зачем вам передавать весь компонент вместо обратного вызова? Я думаю, что это анти-шаблон. –

+0

Поскольку состояние основного компонента должно быть изменено с HeaderComponent. Используя этот подход, который очень груб, без ссылки на родительский компонент, вы не можете изменить свое состояние из дочернего компонента, не так ли? –

+0

Вы можете просто передать функцию 'HeaderComponent', которая имеет ссылку на' MainComponent'. См. Мой ответ :) –

Смежные вопросы