Question

我尝试添加新按钮，该按钮会添加新标签页我正在使用react-tabs 这样的构建标签

<Tabs>
  <TabList>
    <Tab>Title 1</Tab>
    <Tab>Title 2</Tab>
  </TabList>
  <TabPanel>
    <h2>Any content 1</h2>
  </TabPanel>
  <TabPanel>
    <h2>Any content 2</h2>
  </TabPanel>
</Tabs>

所以我需要两个循环，一个用于选项卡，另一个用于选项卡面板像这样

<Fragment>
  <Tabs>
    <TabList>
      {stats.map(({ figure = "", instructions = "" }, i) => {
        <Tab>
          <RichText
            tagName="h2"
            placeholder={__("Write Recipe title…")}
            value={figure}
            onChange={value => updateStatProp(i, "figure", value[0])}
          />
        </Tab>;
      })}
    </TabList>
    {stats.map(({ figure = "", instructions = "" }, i) => {
      <TabPanel>
        <RichText
          tagName="div"
          multiline="p"
          className="steps"
          placeholder={__("Write the instructions…")}
          value={instructions}
          onChange={value => updateStatProp(i, "instructions", value[0])}
        />
        <Button
          isLarge={true}
          onClick={() => {
            const newStats = _cloneDeep(stats);
            newStats.splice(i, 1);
            setAttributes({ stats: newStats });
          }}
        >
          <Dashicon icon="no-alt" />
        </Button>
      </TabPanel>;
    })}
  </Tabs>
  <div style={{ textAlign: "center", padding: "8px 0" }}>
    {stats.length < 5 && (
      <Button
        isLarge={true}
        onClick={() => {
          const newStats = _cloneDeep(stats);
          newStats.push({ figure: "", instructions: "" });
          setAttributes({ stats: newStats });
        }}
      >
        Add new stat
      </Button>
    )}
  </div>
</Fragment>

状态为统计信息。 stats数组中的每一项看起来都像这样{图：'100k'，说明：'humans'} 按钮“添加新的统计信息”仅将新的统计信息对象添加到此数组并调用setAttributes。删除按钮只会删除该索引处的项目。

它没有给出任何错误，但是当我单击“添加新统计信息”按钮时没有添加任何标签

Answer 1

您没有从给map的函数中返回任何内容。返回它，或将函数主体（{}）更改为parens（()）以使返回隐式：

<Fragment>
  <Tabs>
    <TabList>
      {stats.map(({ figure = "", instructions = "" }, i) => { // return statement
        return <Tab>
          <RichText
            tagName="h2"
            placeholder={__("Write Recipe title…")}
            value={figure}
            onChange={value => updateStatProp(i, "figure", value[0])}
          />
        </Tab>;
      })}
    </TabList>
    {stats.map(({ figure = "", instructions = "" }, i) => ( // implicit return
      <TabPanel>
        <RichText
          tagName="div"
          multiline="p"
          className="steps"
          placeholder={__("Write the instructions…")}
          value={instructions}
          onChange={value => updateStatProp(i, "instructions", value[0])}
        />
        <Button
          isLarge={true}
          onClick={() => {
            const newStats = _cloneDeep(stats);
            newStats.splice(i, 1);
            setAttributes({ stats: newStats });
          }}
        >
          <Dashicon icon="no-alt" />
        </Button>
      </TabPanel>;
    ))}
  </Tabs>
  <div style={{ textAlign: "center", padding: "8px 0" }}>
    {stats.length < 5 && (
      <Button
        isLarge={true}
        onClick={() => {
          const newStats = _cloneDeep(stats);
          newStats.push({ figure: "", instructions: "" });
          setAttributes({ stats: newStats });
        }}
      >
        Add new stat
      </Button>
    )}
  </div>
</Fragment>

在反应中添加和删除组件的按钮

1 个答案: