如何在ReactJS中将isValid变量从one.js访问到two.js？

Question

我在下面的问题中遇到的问题是存储在'one.js‘中的代码

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

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

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

Answer 1

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

Flow - One -> CallbackFunction -> Parent -> Props -> Two

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

Answer 2

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

为了这个目标，你必须学习和使用redux或者使用钩子。

但是如果你想在纯reactjs中实现，你必须让一个组件成为另一个组件的父组件，并将状态作为道具发送给子组件。

如下所示：

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

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

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