如何在另一个反应文件中定义局部变量

Question

I have to use Abc variable from a.tsx to another b.tsx file. How can I access that Abc variable in another .tsx file?

Current a.tsx:

export const ProfilePicEditor = (props: ProfilePicEditorProps) => {
    const [Abc, setAbc] = useState(
        'some string'
    )

I tried doing 'export {Abc}' in my a.tsx file and importing it into b.tsx file as 'Import {Abc} from 'a.tsx'. But it didn't worked out. Any possible reasons?

Answer 1

What is the relationship between the two components? Parent/child? Siblings?

React generally expects you (and is designed) to pass data as part of the state via the props.

So if you want to pass data between components and you are not using Redux or a similar library, you need to pass the data in the constructor as a prop and have your constructor extract it.

Answer 2

You should pass the variable as a prop to the child component, if the parent is who wants to accede to the variable you can use a ref

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ChildComponent = React.createRef();
  }
  render() {
    return <ChildComponent ref={this.ChildComponent} />;
  }
}

you can use it like this:

const currentChildComponent = this.currentChildComponent.current;

Answer 3

提升状态或使用状态管理库，例如Redux或MobX。