Javascript 如何在ReactJS中访问从1.js到2.js的isValid变量？

我在下面的问题中面临问题 下面是存储在“one.js”中的代码

const One= (props) => {
  const [isValid, setIsValid]=useState(true);
  return(
      <div>Hello</div>
 );
}
export default One;

const One=（道具）=>{
const[isValid，setIsValid]=useState（true）；
返回(
你好
);
}
导出默认值；

下面是存储在'two.js'中的代码

import One from './one.js'; 
var Two=()=>{
    return(
        <div>Two</div>
    );
 }
 export default Two;

从“/One.js”导入一个；
变量二=（）=>{
返回(
两个
);
}
导出默认值2；

您无法访问一个组件的状态，因为状态对每个组件都是私有的，并且此状态不可访问 但您可以创建公共父组件，并使用回调函数更改其状态，并将值作为prop传递给两个组件

流程-一->调用函数->父->道具->二

---

您还可以尝试使用useContext并在两个和一个之间共享一些数据值

您不能从reactjs中的另一个组件访问组件的状态

为此，您必须学习并使用redux，或者使用挂钩

但是，如果您想在纯reactjs中执行此操作，您必须使一个组件成为另一个组件的父组件，并将状态作为道具发送给子组件

像这样：

//one.jsx
class one extend React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: ""
        }
    }
    render(){
        return <Two props={this.state.text} />
}

//one.jsx
第一类扩展反应组件{
建造师（道具）{
超级（道具）
此.state={
案文：“”
}
}
render（）{
返回
}

然后在two.jsx组件中使用它

class Two extend React.Component{
    render(){
        <div>{this.props.text}</div>
    }
}

class 2扩展反应组件{
render（）{
{this.props.text}
}
}

非常常见的问题，您必须改变想法。多个组件之间通用的状态需要属于一个祖先组件：