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

Question

我有index.js我渲染 App 的文件组件。

Index.js 文件

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

下面是SettingContainer.js 文件的代码，其中我有 SettingContainer成分。我有一个单击按钮，我需要重新渲染 <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;

Answer 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 的想法，代码更少，性能更好。