Question

我有一个像FeedSwitcher这样的组件，里面有两个选项卡

一个用于常规供稿，另一个仅用于当前用户的帖子

在FeedSwitcher组件开始时的值为0，因此当前用户可以查看所有供稿。

const FeedSwitcher = ({feed, posts, user }: FeedSwitcherProps) => {
  const classes = useStyles();
  const [value, setValue] = useState(0);

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    <div className={classes.root}>
      <Tabs
        value={value}
        onChange={handleChange}
        variant="fullWidth"
        indicatorColor="primary"
        textColor="primary"
        aria-label="switcher tabs"
      >
        <Tab icon={<PeopleIcon />} aria-label="phone" />
        <Tab icon={<PersonIcon />} aria-label="favorite" />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Feed feed={feed} />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Posts posts={posts} user={user} />
      </TabPanel>
    </div>
  );
};

当前用户发布新主题后

（该表单位于父组件中）

我想显示索引为1的标签页

如何设置父项的值？

我应该使用redux状态还是在那里另一种直接而简单的方法？

Answer 1

状态必须在父组件中。

您可以向子组件提供值，并向其传递一个函数参数，例如onValueChange，该参数可以用来触发父组件状态的更新。

// in parent
const [feedSwitcherValue, setFeedSwitcherValue] = useState(0);
return (
  <FeedSwitcher
    feed={feed}
    posts={posts}
    user={user}
    value={feedSwitcherValue}
    onValueChange={value => setFeedSwitcherValue(value)}
  />
);

// child
const FeedSwitcher = ({feed, posts, user, value, onValueChange }: FeedSwitcherProps) => {
  const classes = useStyles();

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    onValueChange(newValue);
  };
  return (
    <div className={classes.root}>
      <Tabs
        value={value}
        onChange={handleChange}
        variant="fullWidth"
        indicatorColor="primary"
        textColor="primary"
        aria-label="switcher tabs"
      >
        <Tab icon={<PeopleIcon />} aria-label="phone" />
        <Tab icon={<PersonIcon />} aria-label="favorite" />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Feed feed={feed} />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Posts posts={posts} user={user} />
      </TabPanel>
    </div>
  );
};

如何在反应物料选项卡中从父级更改选项卡

1 个答案: