反应-单击位于组件外部的按钮时渲染组件

Question

我有index.js文件，在其中渲染了App组件，然后调用了hello函数，该函数也在settingcontainer为10的情况下渲染了defaultValues。

Index.js文件

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

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

下面是我具有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 = () => {
  Hello();
};


const App = () => {
  return (
    <React.Fragment>
      Hello Friends
      <div id="divHello">

      </div>
      <button onClick={handleClick}>Button</button>
    </React.Fragment>
  );
};

export default App;

Answer 1

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

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

然后按一下按钮，然后在应用程序中将设置值设置为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>
 );
};

Answer 2

实际上，您的问题又回到了您的思维定势，您应该改变对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'));

如果有任何疑问，请写评论，我肯定会回答并改变我的回答。

Hint：基于Dan Abramov的想法，<></>就像<React.Fragment></React.Fragment>，具有更少的代码和更好的性能。