无法从父组件访问自定义组件属性

Question

我已经创建了一个自定义组件，选择组件的选择，在单击显示ul和单击隐藏ul。

当我单击时，我可以将值设置为内部函数的状态，但我希望访问父组件中的值。

所以我的成分是

 const [showMenu, setShowMenu] = useState(false);
    const [value, setValue] = useState();
    return (
        <>
            <button
                className='btn'
                onClick={() =>
                    showMenu ? setShowMenu(false) : setShowMenu(true)
                }>
                {props.name}
            </button>
            <ul className={showMenu ? "" : "hide"}>
                {props.listsa.map((element) => {
                    return (
                        <li
                            key={element.key}
                            value={element.value}
                            onClick={(e) => {
                                setValue(e.target.value);
                            }}>
                            {element.label}
                        </li>
                    );
                })}
            </ul>
        </>

我想访问上面提到的父组件中的函数组件，这是我的app.js。

如下所示，这是父组件的返回方法。

<div className='App'>
            {/* <Main /> */}

            <OptionsComponent name='ABC Menu' listsa={abc} />
             {/* here I want to use that value to perfom operations/ also on change it should show changed value */}
        </div>

我尝试使用localStorage.setItem("value":value)，它可以工作，但这将使用浏览器内存，因此我正在寻找替代方法。

我尝试过导出变量，它显示了未定义的变量，也尝试了使varibale成为全局变量，它可以工作，但不反映变化。

如有任何帮助，将不胜感激。

Answer 1

你只需要把州举起来，然后传下去，相反：

const [value, setValue] = useState();

return (
    <div className='App'>
        {/* <Main /> */}
        <OptionsComponent name='ABC Menu' listsa={abc} value={value} setValue={setValue}/>
    </div>

和

  const [showMenu, setShowMenu] = useState(false);
  return (
    <>
        <button
            className='btn'
            onClick={() =>
                showMenu ? setShowMenu(false) : setShowMenu(true)
            }>
            {props.name}
        </button>
        <ul className={showMenu ? "" : "hide"}>
            {props.listsa.map((element) => {
                return (
                    <li
                        key={element.key}
                        value={element.value}
                        onClick={(e) => {
                            props.setValue(e.target.value);
                        }}>
                        {element.label}
                    </li>
                );
            })}
        </ul>
      </>
    );