从父级访问反应组件的属性 [英] Accessing properties of a react component from the parent

问题描述

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

 const MyFormTab = (props) =>{const 名称 = props.name返回 (<>
<input type='email'></input><input type='text'></input>
</>)}

然后我想在父组件中渲染这个组件并将 name 属性用于其他目的

 const ParentOfMyFormTab = () =>{const [currentTab, setCurrentTab] = useState(1)const Tab1 = <MyFormTab name='Tab1'/>const Tab2 = <MyFormTab name='Tab2'/>返回 (<表格><div id="tabTitles"><h2 onClick={setCurrentTab(1)}>Tab1.name</h2><h2 onClick={setCurrentTab(2)}>Tab2.name</h2>

{currentTab === 1 ?<Tab1/>:<Tab2/>}</表单>)}

---

除了 SFC，我还可以使用我正在考虑的类.

 class MyFormTab {构造函数(名称){this.name = 名称}使成为(){返回 (<>
<input type='email'></input><input type='email'></input>
</>)}}

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

---

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

谢谢

解决方案

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

const MyFormTab = (props) =>{const 名称 = props.name返回 (<>
<input type='email'></input><input type='text'></input>
</>)}const ParentOfMyFormTab = () =>{const [currentTab, setCurrentTab] = useState(1)const Tab1 = <MyFormTab name=`Tab1`/>const Tab2 = <MyFormTab name=`Tab2`/>返回 (<表格><div id="tabTitles"><h2 onClick={setCurrentTab(1)}>Tab1</h2><h2 onClick={setCurrentTab(2)}>Tab2</h2>

{currentTab === 1 ?<Tab1/>:<Tab2/>}</表单>)}

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

I want to bundle some data together with a component. Here is an example of a SFC that has a property called name. I do not want to use the property name with the component named MyFormTab. Instead I would like to access this property from the parent component and assign it to be displayed within the parent.

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


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

I would then like to render this component inside a parent and use the name property for another purpose

    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>
        )
    }

---

Instead of an SFC, I could also use a class I'm thinking.

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

My project is predominantly using hooks however. My team lead(who doesn't know React much) will probably be hesitant towards mixing class components with hooks. I've read on other posts that hooks can basically replace class components in most situations. I don't know how hooks could be better, or even be used in this situation.

---

What do you think would be a good way to do what I am trying to do? Is putting SFC's with hooks and class components into the same project a good idea? Am I looking at this whole thing wrong?

Thank you

解决方案

In react props are passed only from parent to child. So you can just have a parent with that name value and passed it down if you want to. Edited my answer to respond to you edit.

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>
    )
}

To you question about mixing class based and function components. You can't use hooks with class based components so don't, and there is no need to. I think you should learn more about the basics of react. If you need to share data with other components, the data should be in the parent component, passed to children or in a React context.

这篇关于从父级访问反应组件的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！