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

Question

我必须使用从a.tsx到另一个b.tsx文件的ABC变量。如何在另一个.tsx文件中访问该ABC变量？

当前A.TSX：

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

我尝试在我的a.tsx文件中执行'导出{abc}'，并将其导入到b.tsx文件中，为'a.tsx'的'import {abc}。但这没有解决。有可能的原因吗？

Answer 1

您应该将变量作为道具传递给子女组件，如果父母是想加入变量的父母，则可以使用ref ref

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

您可以这样使用：

const CurrentChildComponent = this.currentChildComponent.Current;

Answer 2

两个组件之间的关系是什么？父母/孩子？兄弟姐妹？

React通常希望您(并设计(通过道具将数据作为州的一部分传递。

因此，如果您想在组件之间传递数据，并且不使用Redux或类似库，则需要将构造函数中的数据传递为Prop并将构造函数提取。