可以更改外部组件中的 object(element) 吗？

Question

我想在另一个组件上调用 changeArea 方法时更改区域（元素）。

我想这样做。

首先，App.js

export default function App(props) {
    const [area, setArea] = React.useState(<><Button/><Button/></>)

    const changeArea = (element) => {
        setArea(element);
    }

    return (
        <div>
            {<area/>}
            <ChildApp changeArea={changeArea}/>
        </div>
    );
}

而且，ChildApp.js

export default function ChildApp(props) {

    // I want do call to change the area.
    props.changeArea(<></Select></>);
    …
}

无论如何，此代码无效。

Error

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

PS. It’s a simplification of the way I want to do it.

Answer 1

const ChildApp = (props) => {
  const buttonHandler = () => {
    props.changeArea(<h1>World</h1>)
  }
  return <><button onClick={buttonHandler}>Hello</button> </>
}

export default function App() {
  const [area, setArea] = React.useState(<><h1>Hello</h1></>)
    const changeArea = (element) => {
        setArea(element);
    }
    return (
        <div>
            {area}
            <ChildApp changeArea={changeArea}/>
        </div>
    );
}

Answer 2

由于您在组件主体中调用 props.changeArea(<></Select></>);，因此每次您的组件呈现（函数调用）时，您都会设置状态父级（App），组件中的每个更新状态都会导致重新渲染（调用）组件及其子级，结果你处理一个循环，你 props.changeArea(<></Select></>);，它会导致重新渲染它是父级，并重新渲染父级导致调用 props.changeArea(<></Select></>); 您不能直接在函数体中调用，您可以在 useEffect 或某些 eventHandler 中调用。像这样：

export default function ChildApp(props) {
  ...
  useEffect(()=> {
  props.changeArea(<></Select></>);
  }, []);
  ...
}

在上面的代码中，props.changeArea(<></Select></>); 第一次调用 ChildApp 渲染，而在 ChildApp 的其他渲染中它从不调用 props.changeArea。

如果您想了解如何在 eventHandler 中做到这一点，您可以查看@Akhil 解决方案。

可以更改外部组件中的 object(element) 吗？

Can change an object(element) in an external component?

reactjs

react-hooks

react-functional-component