- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用componentDidUpdate
动态渲染组件集合。这是我的场景:
var index = 0;
class myComponent extends Component {
constructor(props) {
super(props);
this.state = {
componentList: [<ComponentToRender key={index} id={index} />]
};
this.addPeriodHandler = this.addPeriodHandler.bind(this);
}
componentDidUpdate = () => {
var container = document.getElementById("container");
this.state.componentList.length !== 0
? ReactDOM.render(this.state.componentList, container)
: ReactDOM.unmountComponentAtNode(container);
};
addHandler = () => {
var array = this.state.componentList;
index++;
array.push(<ComponentToRender key={index} id={index} />);
this.setState = {
componentList: array
};
};
render() {
return (
<div id="Wrapper">
<button id="addPeriod" onClick={this.addHandler}>
Add Component
</button>
<div id="container" />
</div>
);
}
}
问题是 componentDidUpdate
只能工作一次,但每次该组件的状态发生变化时它都应该工作。预先感谢您。
最佳答案
这不是如何使用react。使用ReactDOM.render(),您正在创建一个全新的组件树。通常,您只需执行一次即可最初渲染您的应用程序。其他所有内容都将由组件的 render() 函数渲染。如果你使用 ReactDOM.render() 来做到这一点,你基本上会丢弃每次更新数据时已经渲染的所有 React 内容,并从头开始重新创建它,而实际上你可能只需要添加一个节点某处。
此外,您实际存储在组件状态中的内容应该是纯数据而不是组件。然后使用此数据在 render()
函数中渲染组件。
有效用例示例:
class MyComponent extends Component{
state = {
periods: []
};
handleAddPeriod = () => {
this.setState(oldState => ({
periods: [
...oldState.periods,
{/*new period data here*/}
],
});
};
render() {
return (
<div id="Wrapper">
<button id="addPeriod" onClick={this.handleAddPeriod}>
Add Component
</button>
<div id="container">
{periods.map((period, index) => (
<ComponentToRender id={index} key={index}>
{/* render period data here */}
</ComponentToRender>
))}
</div>
</div>
);
}
}
}
此外,您不应该像使用 index
那样使用全局变量。如果您的数据在使用应用程序期间发生变化,则这应该是组件状态的指示器。
关于javascript - ComponentDidUpdate 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51635554/
您好,我正在调用 componentdidupdate 以便像这样使用新的 ToDos 重新呈现我的页面 this.state = { displayToDos
我收到以下警告,但我不知道它意味着哪个数据更改,你知道吗? Warning: componentWillReceiveProps has been renamed, and is not recomm
当我使用react-router更改路由时,componentDidUpdate是否会触发?我修改了示例代码,但似乎无法使其工作。 我让主页组件记录了一些文本,但它似乎没有触发。感谢任何帮助,谢谢!
我想知道 React 组件的生命周期方法 componentDidUpdate 是否在所有子组件的 render 方法完成后执行,或者在 render 调用该组件的方法。 由于协调器递归地调用 ren
在每个模块的仪表板中,其布局数据(使用react-grid-layout)与模块数据分开存储,并且每个数据都存储在数据库中。当前模块数据和布局数据存储在仪表板组件状态中。每当模块或布局的先前状态与当前
我正在尝试使用componentDidUpdate动态渲染组件集合。这是我的场景: var index = 0; class myComponent extends Component { con
我有一个设置屏幕,我可以在其中获取用户的信息数量,例如年龄、体重和性别,然后根据这些信息计算用户每天应该喝多少水。 我想自动计算这个金额而不需要计算按钮。 Invariant Violation: M
我想测试 componentDidUpdate我尝试传递 {...props} 而不定义它然后 componentDidUpdate 首先记录一个空对象,然后不需要更新这会记录它们两次并显示 prop
我有一个类组件如下: class App extends Component { constructor(props){ super(props); this.
我正在使用带有文本输入的简单表单。当写入内容时,组件的状态会更新,并且由于 this.setState 是异步的,我从 componentDidUpdate 上的 API 获取数据。 问题是我没有找到
这是场景。我有一个父组件和一个子组件。父组件执行 ajax 调用并将数据推送到子组件。 当子组件接收到新数据时,在(子组件)的 componentDidUpdate 中,我将重新设置其内部状态。 co
在我的应用程序中,我有一个 HomePage其中有导航链接的组件。该组件的路由是 。因此该组件有一个导航栏,其中包含指向其“子路线”的 NavLink 链接。例如,导航链接可引导您访问 /browse
我将 Redux 重构到我的代码中,但不知道如何获取之前的状态。我的 componentDidUpdate 生命周期方法需要此状态,以便我可以调用其他方法而不会陷入无限循环。 // when comp
当满足以下条件时,我需要确保输入元素获得焦点: DOM 可用 并且属性已更改 问题:我是否需要将代码同时放入 componentDidUpdate 和 componentDidMount 中,还是仅使
我将一个自调用函数从 App 组件传递到 WeatherForecast 组件的 getBgColor 函数。这会从子组件 WeatherForecast 获取一个值,并将其传递到 App 组件以更新
在这里阅读了大量其他相关问题后。我还找不到答案。我已经改进了我的代码,并且我相信我非常接近解决方案,但我仍然无法实现我的目标。 我是编码和 native react 的新手。我想构建水提醒应用程序,我
我有一个障碍,那就是如果我按下取消订单按钮(batalkan pesanan)就会出现无限循环,为什么我要使用ComponentDidUpdate因为要更新新的显示或者除了ComponentDidUp
我有一个带有 componentDidMount() 方法的组件,该方法调用名为 getData() 的方法,该方法获取初始数据并设置组件的初始状态。 class LogsSettings exten
简单的例子,但不知道为什么我不能让它工作: class Grid extends React.Component { componentDidUpdate = () =>{
我的纯组件中有这段代码: componentDidUpdate(prevProps) { const { scheduleSheet } = this.props; const {
我是一名优秀的程序员,十分优秀!