Reactjs 子组件

我对react中的层次结构有疑问

My Main.js有以下两篇文章：

        <article className="angel__flow">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Flow
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                />
              );
            } else return "";
          })}
        </article>
        <article className="angel__steps">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Steps
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                  commandSender={sendViewerMessage}
                />
              );
            } else return "";
          })}
        </article>

function Flow({ index, opened, procedure }) {

  const { t, i18n } = useTranslation();
  const [show, setShow] = useState(false);

  useEffect(()=>{
    setShow(opened)
  },[opened])

  return (
    <a onClick={() => setShow(!show)} className={`angel__flow__button ${show ? "active" : ""}`}>     
      {t(procedure.title[i18n.language])}
      <span class="angel__flow__button__number">{index+1}</span>  
    </a>
  );
}

function Steps({ index, opened, procedure, commandSender }) {

  const { i18n } = useTranslation();
  const [selected, setSelected] = useState([]);

  function clickHandler(command, index, key, procedure) {
     if (!isSelected(key)) commandSender(`${command}|${index}|${procedure.id}|${key}`)

    if (isSelected(key)) setSelected(selected.filter(s => s !== key))
    else setSelected([...selected, (key)])
  }

  function isSelected(key) {
    return selected.includes(key);
  }

  return (
    <>
      { opened && (
        <>
          {procedure.guide &&
            map(procedure.guide, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button blue ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('GUIDE', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          <hr />
          {procedure.error &&
            map(procedure.error, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button red ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('ERROR', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          {procedure.success &&
            map(procedure.success, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button green ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('SUCCESS', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
        </>
      )}
    </>
  );
}

{steps.map（（步骤，索引）=>{
如果（程序[步骤]）{
返回(
);
}否则返回“”；
})}
{steps.map（（步骤，索引）=>{
如果（程序[步骤]）{
返回(
);
}否则返回“”；
})}

每篇文章都有一个映射，对于每个项目，它调用一个函数。第一个调用Flow函数，第二个调用Steps函数

我的流量函数如下所示：

        <article className="angel__flow">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Flow
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                />
              );
            } else return "";
          })}
        </article>
        <article className="angel__steps">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Steps
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                  commandSender={sendViewerMessage}
                />
              );
            } else return "";
          })}
        </article>

function Flow({ index, opened, procedure }) {

  const { t, i18n } = useTranslation();
  const [show, setShow] = useState(false);

  useEffect(()=>{
    setShow(opened)
  },[opened])

  return (
    <a onClick={() => setShow(!show)} className={`angel__flow__button ${show ? "active" : ""}`}>     
      {t(procedure.title[i18n.language])}
      <span class="angel__flow__button__number">{index+1}</span>  
    </a>
  );
}

function Steps({ index, opened, procedure, commandSender }) {

  const { i18n } = useTranslation();
  const [selected, setSelected] = useState([]);

  function clickHandler(command, index, key, procedure) {
     if (!isSelected(key)) commandSender(`${command}|${index}|${procedure.id}|${key}`)

    if (isSelected(key)) setSelected(selected.filter(s => s !== key))
    else setSelected([...selected, (key)])
  }

  function isSelected(key) {
    return selected.includes(key);
  }

  return (
    <>
      { opened && (
        <>
          {procedure.guide &&
            map(procedure.guide, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button blue ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('GUIDE', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          <hr />
          {procedure.error &&
            map(procedure.error, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button red ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('ERROR', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          {procedure.success &&
            map(procedure.success, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button green ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('SUCCESS', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
        </>
      )}
    </>
  );
}

函数流（{index，opened，procedure}）{
const{t，i18n}=useTranslation（）；
const[show，setShow]=useState（false）；
useffect（（）=>{
设置显示（已打开）
}，[已打开]）
返回(
setShow（！show）}className={`angel\uuuuu flow\uuu按钮${show？“活动”：“}`}>
{t（过程.标题[i18n.语言]）
{index+1}
);
}

我的步骤功能如下：

        <article className="angel__flow">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Flow
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                />
              );
            } else return "";
          })}
        </article>
        <article className="angel__steps">
          {steps.map((step, index) => {
            if (procedures[step]){
              return (
                <Steps
                  key={`${index}-${step}`}
                  index={index}
                  opened={currentStepIndex === index}
                  procedure={procedures[step]}
                  commandSender={sendViewerMessage}
                />
              );
            } else return "";
          })}
        </article>

function Flow({ index, opened, procedure }) {

  const { t, i18n } = useTranslation();
  const [show, setShow] = useState(false);

  useEffect(()=>{
    setShow(opened)
  },[opened])

  return (
    <a onClick={() => setShow(!show)} className={`angel__flow__button ${show ? "active" : ""}`}>     
      {t(procedure.title[i18n.language])}
      <span class="angel__flow__button__number">{index+1}</span>  
    </a>
  );
}

function Steps({ index, opened, procedure, commandSender }) {

  const { i18n } = useTranslation();
  const [selected, setSelected] = useState([]);

  function clickHandler(command, index, key, procedure) {
     if (!isSelected(key)) commandSender(`${command}|${index}|${procedure.id}|${key}`)

    if (isSelected(key)) setSelected(selected.filter(s => s !== key))
    else setSelected([...selected, (key)])
  }

  function isSelected(key) {
    return selected.includes(key);
  }

  return (
    <>
      { opened && (
        <>
          {procedure.guide &&
            map(procedure.guide, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button blue ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('GUIDE', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          <hr />
          {procedure.error &&
            map(procedure.error, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button red ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('ERROR', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
          {procedure.success &&
            map(procedure.success, (value, key) => (
              <a
                key={key}
                className={`angel__steps__button green ${isSelected(key) ? "active" : ""}`}
                onClick={() => clickHandler('SUCCESS', index, key, procedure)}
              >
                {value[i18n.language]}
              </a>
            ))
          }
        </>
      )}
    </>
  );
}

函数步骤（{index，opened，procedure，commandSender}）{
const{i18n}=useTranslation（）；
const[selected，setSelected]=useState（[]）；
函数clickHandler（命令、索引、键、过程）{
if（！isSelected（key））commandSender（`${command}|${index}|${procedure.id}|${key}`）
如果（isSelected（key））设置selected（selected.filter（s=>s！==key））
选择其他设置（[…已选择，（键）]）
}
已选择功能（键）{
返回所选。包括（键）；
}
返回(
{打开&&(
{程序指南&&
地图（程序指南，（值，键）=>(
clickHandler（'GUIDE'，index，key，procedure）}
>
{value[i18n.language]}
))
}

{procedure.error&&
映射（procedure.error，（值，键）=>(
clickHandler（'ERROR'，index，key，procedure）}
>
{value[i18n.language]}
))
}
{程序成功&&
映射（procedure.success，（值，键）=>(
clickHandler（'SUCCESS'，index，key，procedure）}
>
{value[i18n.language]}
))
}
)}
);
}

我要做的是：当我在Flow函数中单击A标记时，它必须打开该标记的步骤

所以，我不知道我要做什么。可能会向我的主函数发送一个标志，表明我单击了该标记，因此，我的步骤函数将打开它的标记。

---

你们能帮我一下吗？

在

Main.js

中，将一个点击处理程序传递到

Flow

：

<Flow setCurrentStepHandler={(i) => this.setState({currentStepIndex: this.state.currentStepIndex === i ? null : i})}/>

---

这样，当更新

currentStepIndex

时，它将作为道具传递给

我是否必须在Main.js中实现此setCurrentStepHandler函数？我还需要向Steps函数传递任何其他内容吗？很抱歉，我对React中的层次结构感到非常困惑。我现在遇到以下错误：TypeError:无法读取的属性“setState”undefined@afr哦，如果它是一个功能组件，那么在Main.js中执行

useState

，还有其他方法来执行

setCurrentStepHandler

，但是是的，我刚才提到的版本是在Main.js中实现的