访问子组件中在父组件中定义的变量

Question

我想访问子函数中父函数中定义的someVariable。

import React from "react";

export default function Parent(props) {
    // Variable is definded
    const someVariable = false;

    return <div className="parentClass">{props.children}</div>;
}

Parent.Child = function(props) {
    // Want to access someVariable defined in parent function
    return someVariable && <div className="childClass">Should render if someVariable is true</div>;
}

// Use like this later
<Parent>
    // This will be rendered only if someVariable is true
    <Parent.Child />
</Parent>

Answer 1

您可以将父组件中的变量作为道具传递给子组件：

const ChildComponent = (props) => {

    return (
       <View><Text>{props.someVariable}</Text></View>
    )
}

const ParentComponent = () => {
   const someVariable = false;

   return (
      <ChildComponent someVariable={someVariable} />
   )
}