Reactjs: передача реквизита из компонента карты в компонент вкладки

Question

• Я новичок, чтобы реагировать.
• Я пытаюсь передать реквизиты из дочернего компонента на вкладки родительского компонента, на которых есть вкладки избранного.
• поэтому я подумал, что передам значения из метода handleClickOpen, так как именно там я щелкаю значок favoutites.
• но не уверен, как пройти.
• когда я нажимаю на избранное в компоненте карт, оно должно быть сохранено на вкладке избранного.
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я исправил это сам.
• , поскольку прохождение реквизита является важной концепцией.
• весь мой код находится в tab-demo.js

https://codesandbox.io/s/40mmrl9059

 <CardActions className={classes.actions} disableActionSpacing>
                    <IconButton
                      onClick={this.handleClickOpen}
                      aria-label="Add to favorites"
                    >
                      <FavoriteIcon />
                    </IconButton>

     <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
          >
            <Tab label="Search" icon={<PhoneIcon />} />
            <Tab label="Favorites" icon={<FavoriteIcon />} />
            {/* <Tab label="Item Three" icon={<PersonPinIcon />} />
            <Tab label="Item Four" icon={<HelpIcon />} />
            <Tab label="Item Five" icon={<ShoppingBasket />} />
            <Tab label="Item Six" icon={<ThumbDown />} />
            <Tab label="Item Seven" icon={<ThumbUp />} /> */}
          </Tabs>
        </AppBar>

react code

 handleClickOpen = currentTarget => {
    console.log("handleClickOpen--->");
    console.log("event.currentTarget--->", currentTarget.relatedTarget);
    // console.log("event.relatedTarget--->", relatedTarget);

    // this.setState({ open: true });
  };

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

function TabsFavourites(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabsFavourites.propTypes = {
  children: PropTypes.node.isRequired
};

Answer 1

Пример:

У вас есть структура:

<Parent>
  <Tabs />
  <Child />
</Parent>

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

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      favorites: []
    }
    this.handleClick = this.handleClick.bind(this);
  }

  // props
  handleClick(prop) {
    this.setState({ favorites: this.state.concat(prop) })
  }

  render() {
    const { favorites } = this.state;
    return (
      <div>
        <Tabs favorites={ favorites } />
        <Child onClick={ this.handleClick }/>
      </div>
    )
  }
}