繁体   English   中英

从父级访问反应组件的属性

[英]Accessing properties of a react component from the parent

我想将一些数据与一个组件捆绑在一起。 下面是一个 SFC 的示例,它有一个名为 name 的属性。 我不想将属性name与名为MyFormTab的组件MyFormTab 相反,我想从父组件访问此属性并将其分配为在父组件中显示。

 const MyFormTab = (props) => { const name = props.name return ( <> <div className='flex-center-col'> <input type='email'></input> <input type='text'></input> </div> </> ) }

然后我想在父级中呈现此组件并将 name 属性用于其他目的

 const ParentOfMyFormTab = () => { const [currentTab, setCurrentTab] = useState(1) const Tab1 = <MyFormTab name='Tab1' /> const Tab2 = <MyFormTab name='Tab2' /> return ( <form> <div id="tabTitles"> <h2 onClick={setCurrentTab(1)}>Tab1.name</h2> <h2 onClick={setCurrentTab(2)}>Tab2.name</h2> </div> {currentTab === 1 ? <Tab1 /> : <Tab2 />} </form> ) }


除了 SFC,我还可以使用我正在考虑的类。

 class MyFormTab { constructor(name){ this.name = name } render(){ return ( <> <div className='flex-center-col'> <input type='email'></input> <input type='email'></input> </div> </> ) } }

然而,我的项目主要使用钩子。 我的团队负责人(他不太了解 React)可能会对将类组件与钩子混合使用犹豫不决。 我在其他帖子中读到,在大多数情况下,钩子基本上可以替换类组件。 我不知道钩子如何更好,甚至在这种情况下使用。


你认为做我想做的事情的好方法是什么? 将带有钩子和类组件的 SFC 放在同一个项目中是个好主意吗? 我看这整件事错了吗?

谢谢

在反应props中,仅从父级传递给子级。 因此,您可以拥有一个具有该名称值的父级,并根据需要将其传递下去。 编辑了我的答案以回应您的编辑。

const MyFormTab = (props) => {
    const name = props.name        

    return (
        <>
            <div className='flex-center-col'>
                <input type='email'></input>
                <input type='text'></input>
            </div>
        </>
    )
}

const ParentOfMyFormTab = () => {
    const [currentTab, setCurrentTab] = useState(1)
    const Tab1 = <MyFormTab name=`Tab1` />
    const Tab2 = <MyFormTab name=`Tab2` />
    return (
        <form>
            <div id="tabTitles">
                <h2 onClick={setCurrentTab(1)}>Tab1</h2>
                <h2 onClick={setCurrentTab(2)}>Tab2</h2>
            </div>
            {currentTab === 1 ? <Tab1 /> : <Tab2 />}
        </form>
    )
}

关于混合基于类和函数组件的问题。 你不能在基于类的组件中使用钩子,所以不要,也没有必要。 我认为你应该更多地了解 React 的基础知识。 如果你需要与其他组件共享数据,数据应该在父组件中,传递给子组件或在 React 上下文中。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM