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

Question

我想将一些数据与一个组件捆绑在一起。下面是一个具有名为 name 的属性的 SFC 示例。我不想将属性name 与名为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）可能会犹豫将类组件与钩子混合。我在other posts 上读到过，在大多数情况下，钩子基本上可以替换类组件。我不知道钩子如何更好，甚至在这种情况下使用。

---

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

谢谢

Answer 1

在反应中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 上下文中。