React - 单击位于组件外部的按钮时重新渲染组件

Posted 2023-02-23

【中文标题】React - 单击位于组件外部的按钮时重新渲染组件

【英文标题】：React - Rerender component on click of button which resides outside of component

【发布时间】：2020-06-06 20:59:27

【问题描述】：

我有 index.js 文件，我在其中渲染了 App 组件。

Index.js 文件

ReactDOM.render(<App />, document.getElementById('root'));

下面是我有 SettingContainer 组件的 SettingContainer.js 文件的代码。我有一个点击它的按钮，我需要重新渲染<SettingContainer value="10" /> 但它不能用defaultvalues 渲染。

SettingContainer.js 文件：

import React from 'react';

const SettingContainer = (props) => 
    const [state, setState] = React.useState(
        currentValue: props.value
    );

    const handleChange = (event) => 
        setState( currentValue: event.target.value );
    ;

    return (
        <React.Fragment>
            <input type='text' value=state.currentValue onChange=handleChange />
        </React.Fragment>
    )

;

export default SettingContainer;

下面是App.js 文件的代码，我有App 组件。

App.js 文件

const handleClick = () => 
  ReactDOM.render(<SettingContainer value="10" />, document.getElementById('divHello'));
;

const App = () => 
  return (
    <>
      <div id="divHello">
        <SettingContainer value="10" />
      </div>
      <button onClick=handleClick>Button</button>
    </>
  );
;

export default App;

【问题讨论】：

你到底想完成什么？

我需要在单击该组件外部的按钮时使用 defaultValues 重新渲染 settingContainer..

也许使用 Redux ？

不，亲爱的@DominikMatis，请不要，Redux 很好，但不适用于这种微小的情况。它可能有一个上限状态。

好吧，我不认为你应该分别渲染两个组件......都应该在App中

【参考方案1】：

其实，你的问题又回到你的心态上，你应该改变你对 ReactJS 的想法。你应该有一个Index 容器，如下所示：

const Index = () => 
  const [isRender, renderSettingContainer] = useState(false);

  return (
    <>
      isRender && (
        <SettingContainer />
      )
      <App onClick=renderSettingContainer>
    </>;
  );
;

然后，将 onClick 函数从 props 传递给 App，如下所示：

const App = ( onClick ) => (
  <>
    Hello Friends
    <div id="divHello">

    </div>
    <button onClick=onClick>Button</button>
    </>
  );

另外，ReactDOM 也不需要使用两次，所以写成如下：

ReactDOM.render(<Index />, document.getElementById('root'));

如果您有任何问题，请写评论，肯定的，我会回答并会更改我的答案。

提示：<></> 与 <React.Fragment></React.Fragment> 一样，代码更少，性能更好，基于 Dan Abramov 的想法。

【参考方案2】：

使用条件渲染，按下按钮设置值显示Hello组件。

const Hello = () => (<p>Hello</p>)

然后在 App 中按下按钮时将值设置为 true。

const App = () => 

  const [displayHello, setDisplayHello] = useState(false);

  const handleClick = () => 
    setDisplayHello(!displayHello)
  ;

  return (
    <React.Fragment>
     Hello Friends
    <div id="divHello">

    </div>
    displayHello && <Hello />
    <button onClick=handleClick>Button</button>
   </React.Fragment>
 );
;

// Get a hook function
const useState = React;

const Hello = () => (<p style= backgroundColor: 'green', color: 'white'>Hi from Hello Component</p>)

const App = () => 

    const [displayHello, setDisplayHello] = useState(false);
  
    const handleClick = () => 
      setDisplayHello(!displayHello)
    ;
  
    return (
      <React.Fragment>
       Hello Friends
      <div id="divHello">
  
      </div>
      displayHello && <Hello />
      <button onClick=handleClick>Button</button>
     </React.Fragment>
   );
  ;


// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

您的回答就像mine 使用更好的工具，我的意思是代码片段。我留下一个赞成票。谢谢。