Позвоните ребенку событие от родителя

Question

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

Я думаю передать событие onActive от родителя его дочерним элементам, <ClientInfo/> and <Details/>.

Это позволит детям проверить себя и выполнить любые действия, которые они должны сделать до того, каквкладка переключается.

Я не уверен, как будет выглядеть синтаксис.Я считаю, что мне нужно связать событие, чтобы передать его ребенку.Имеет ли концепция смысл?Мой код точно не делает.Как мы можем добиться этого?

  class ParentC extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '0',
        }; 
        this.handleActive = this.handleActive.bind(this);
      }
      render(){
        return(
         <Tabs>
         <Tab label={<h6>Client Info</h6>} value="0" onActive={this.handleActive}>
          <ClientInfo tabChange={this.handleActive}/>
        </Tab>
        <Tab label={<h6>Details</h6>} value="1" onActive={}>
          <Details tabChange={this.handleActive} />
        </Tab>
        </Tabs>
        )
      }
    }

tldr;Событие табуляции необходимо передать дочернему компоненту

Answer 1

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

Если вы строите систему с вкладками, я бы пошел с монтированием / размонтированием Tab s на переключателе.и использовать componentDidMount и componentWillUnmount методы жизненного цикла.

Однако, прочитав ваш вопрос еще раз, я не думаю, что вам нужны такие обратные вызовы.Вот что я предлагаю:

class Tab extends Component {
  componentDidMount() {
    // do stuff here
  }

  componentWillUnmount() {
    // ...
  }

  render() {
    return (
      <div className="tabTitle">{this.props.title}</div>
    );
  }
}

class TabbedView extends Component {
  state = {
    activeTab: 0,
  };

  onActiveTabChange(idx) {
    this.setState({activeTab: idx});
  }

  render() {
    return (
      <div className="tabs">
        <div className="tabButtons">
          {React.Children.map((c, idx) => (
            <button onClick={this.onActiveTabChange(idx)}>
              {c.props.title}
            </button>
          ))}
        </div>
        <div className="activeTab">
          {React.Children.map(children, (child, idx) => {
            if (idx === this.state.activeTab) {
              return child;
            }
            return null;
          })}
        </div>
      </div>
    );
  }
}

Примечание Мой пример не очень подробный.Я просто хотел дать вам идею, поскольку реализация зависит от ваших конкретных потребностей.

Именно так я обычно структурирую компоненты, как это.