![](/img/trans.png)
[英]How to rerender React component after modifying its props outside of the component
[英]React - Rerender component on click of button which resides outside of component
我有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;
实际上,你的问题又回到了你的心态,你应该改变你对 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 的想法。
使用条件渲染,按下按钮设置值以显示 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.