React.js передает данные между потоками компонентов

Question

Я создал три основных компонента.

A отображает как компоненты B, так и C B как вкладки, содержащие заголовки 1,2,3 C - первая страница, на которой представлены две формы, по одному. При отображении первой формы мне нужно показать вкладку 1 в компоненте B. При показе второй формы мне нужно отобразить вкладку 3 в компоненте B.

Я просто хочу передать данные из компонента C, на основе которого отображается компонент B.

Я положил состояние на компонент C и попытался использовать те же this.state.data или this.props.data, чтобы не было значения, входящего в контроллер B.

A.jsx

import React from 'react'; 
import B from './B.jsx'; 
import C from './C.jsx' 
class A extends React.Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      show : '1', 
     } 
    } 
    render() { 
     return (
      <div>{this.props.show} 
       <B /> 
       <C/> 
      </div> 
     ) 
    } 
} 

export default A; 

B.jsx

import React from 'react'; 

class B extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      show : '1', 
     } 
    } 
    render() { 
     return (
      //html code here 
     ) 
    } 
} 

C.jsx

class C extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      show : '1', 
     } 
    } 
    render() { 
     return (
      //html code here 
     ) 
    } 
} 

Answer 1

Я попытался создать тот же сценарий, что u описал, проверьте рабочий стол jsfiddle.

jsfiddle: https://jsfiddle.net/mj8rsawh/

Прокомментируйте это, если вы хотите какой-либо другой помощи.

Answer 2

Вам нужно будет добавить свое состояние в качестве родительского компонента здесь было бы Компонент затем передать функцию, чтобы изменить свои состояния на B и C, чтобы изменить свое состояние на А, как показано ниже

class A extends React.Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      show : '1', 
     }; 
    } 
    changeShow(show){ 
     this.setState({show: show}); 
    } 
    render() { 
     return (
      <div>{this.props.show} 
       <B show={this.state.show}/> 
       <C handleChangeShow={this.changeShow.bind(this)} show={this.state.show}/> 
      </div> 
     ) 
    } 
} 

Теперь у вас есть доступ, чтобы показать состояние в своих дочерних компонентов и может изменить его от них, например, в C

class C extends React.Component { 
    handleChange({target}){ 
     this.props.handleChangeShow(target.value) 
    } 
    render() { 
     return (
      <select onChange={this.handleChange.bind(this)}> 
       <option value="0">hide</option> 
       <option value="1">show</option> 
      </select> 
     ) 
    } 
} 

Теперь у вас есть доступ, чтобы показать состояние в B

class B extends React.Component { 

    render() { 
     return (
      {this.props.show} 
     ) 
    } 
} 

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