如何在反应中使用曾祖父母的状态

Question

从第一个组件下方的 4 个组件设置状态的最简单方法是什么？

• 名字{name}
• 第二
• 第三
• 第四个{setName}

在第四个组件中我想设置名称，然后在第一个组件中使用它来呈现像 {name} 这样的名称

const First = () => {
  const [name, setName] = useState();
<div>
  <div>{name}
  <Second />
</div>
}

const Second = () => {
 <div>
  <Third />
 </div>
}

const Third = () => {
 <div>
  <Fourth />
 </div>
}

const Fourth = () => {
 <div>
  <div onClick={()=>setName(something.name)}>{something.name). 
  </div>
 </div>
}

Answer 1

您可以通过将setName 作为道具从First 组件传递给Fourth 来做到这一点

const First = () => {
  const [name, setName] = useState();
  return (
    <div>
      {name}
      <Second setFirstName={(name) => setName(name)} />
    </div>
  );
}

const Second = ({ setFirstName }) => {
  return (
   <div>
     <Third setFirstName={setFirstName}/>
   </div>)
}

const Third = ({ setFirstName }) => {
 return (
  <div>
    <Fourth setFirstName={setFirstName}/>
  </div>
 )
}

const Fourth = ({ setFirstName }) => {
 return (
   <div>
     <div onClick={() => setFirstName('Test Name')}>Press to set Name</div>
   </div>
 )
}

Answer 2

在第四个组件中，您可以使用 handleNameChange(newName) 属性来提升状态。

const FourthComponent = (
  name: string,
  handleNameChanged: (newName: string) => void
) = {
  const onNameChanged = (newName: string) => handleNameChanged(newName)
}

第三个和第二个组件以相同的方式抬起。

最后，在第一个中，您将拥有类似的内容：

const FirstComponent = () => {
  const [name, setName] = useState<string>('')

  <SecondComponent
    name={name}
    handleNameChange={(name) => setNAme(name)}
  />
}

Answer 3

如果您想将变量传递给父级，您只需通过 prop 函数传递它：

const Parent = () => {
    const [var, setVar] = useState();

    useEffect(() => {
        console.log(`${var} in parent`);

    return (
        <Child passVarToParent={setVar} />
    );
}

const Child = (props) => {
    return (
        <input /* ... */ onChange={(e) => props.passVarToParent(e.target.value)} />
    );
}

但是，在父子链的情况下，我会使用一些状态管理，例如 Redux、MobX 或 React Context。

Answer 4

在父子之间的状态共享（我的意思是props 和emit）和状态管理（如redux）之间存在一个主题。这个主题被称为Event Bus。 有一个使用Event Bus 管理数据的代码示例：

const eventBus = {
  on(event, callback) {
    document.addEventListener(event, (e) => callback(e.detail));
  },
  dispatch(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  },
  remove(event, callback) {
    document.removeEventListener(event, callback);
  },
};
class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {      
      name: "",    
    };  
  }
  componentDidMount() {
    eventBus.on("name", (data) =>
      this.setState({ name: data.name })
    );
  }
  componentWillUnmount() {
    eventBus.remove("name");
  }
return (<div>
          <div>{name}
          <Second />
        </div>)
}
const Second = () => {
 <div>  
   <Third />
 </div>}
const Third = () => {
  <div>  
    <Fourth /> 
  </div>
}
const Forth = () => { 
  <div>
    <div onClick={()=>eventBus.dispatch("name", { name: "name changed" });}>{something.name). 
    </div>
  </div>
}