[英]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.