React - 單擊位於組件外部的按鈕時重新渲染組件

Question

我有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組件的App.js文件的代碼。

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;

Answer 1

實際上，你的問題又回到了你的心態，你應該改變你對 ReactJS 的想法。你應該有一個如下所示的Index容器：

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

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

然后，將onClick function 從道具傳遞給應用程序，如下所示：

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 的想法。

Answer 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>