[英]React - Rerender component on click of button which resides outside of component
I have index.js
file where I have rendered the App
component.我有
index.js
文件,我在其中呈现了App
组件。
Index.js file Index.js 文件
ReactDOM.render(<App />, document.getElementById('root'));
Below is the code for SettingContainer.js file where I have SettingContainer
component.下面是我有
SettingContainer
组件的 SettingContainer.js 文件的代码。 I have a button on click of it I need to rerender <SettingContainer value="10" />
But It doesn't render with defaultvalues
.我有一个按钮,点击它我需要重新呈现
<SettingContainer value="10" />
但它不会使用defaultvalues
呈现。
SettingContainer.js file: 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;
Below is the code for the App.js
file where I have App
component.下面是我有
App
组件的App.js
文件的代码。
App.js file 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;
Actually, your issue comes back to your mindset, you should change your thoughts about ReactJS. you should have an Index
container like below:实际上,你的问题又回到了你的心态,你应该改变你对 ReactJS 的想法。你应该有一个如下所示的
Index
容器:
const Index = () => {
const [isRender, renderSettingContainer] = useState(false);
return (
<>
{isRender && (
<SettingContainer />
)}
<App onClick={renderSettingContainer}>
</>;
);
};
Then, pass the onClick
function from props to the App like below:然后,将
onClick
function 从道具传递给应用程序,如下所示:
const App = ({ onClick }) => (
<>
Hello Friends
<div id="divHello">
</div>
<button onClick={onClick}>Button</button>
</>
);
Also, there is no need to use ReactDOM
twice, so write it like below:另外,没有必要两次使用
ReactDOM
,所以像下面这样写:
ReactDOM.render(<Index />, document.getElementById('root'));
If you have any questions, write a comment, definitely, I will answer and will change my answer.如果您有任何问题,请发表评论,一定会,我会回答并会更改我的答案。
Hint : the <></>
is just like <React.Fragment></React.Fragment>
with less code and better performance, based on Dan Abramov idea.提示:
<></>
就像<React.Fragment></React.Fragment>
一样,代码更少,性能更好,基于 Dan Abramov 的想法。
Use conditional rendering, on press button set value to display Hello component.使用条件渲染,按下按钮设置值以显示 Hello 组件。
const Hello = () => (<p>Hello</p>)
Then in App set value to true on button press.然后在 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.