Question

我无法强制组件在状态更新时调用dangerouslySetInnerHTML。我的测试显示状态正在成功更新并且组件已重新呈现。但是，状态设置的所有新信息都会显示，直到我再次刷新页面。

我在网上找到的唯一解决方案是为每个单元格设置唯一的密钥，但这些密钥并不起作用。

日历：

var tableItems = times.map((time) => {
  return <TableItem key={time} time={time}/>;
});

表项：

constructor(props) {
    super(props);
    this.state = {
        events: []
    }
}

componentWillReceiveProps(nextProps) {
    if (nextProps.events) {
        this.setState({
            events: nextProps.events
        })
    }
}

assignEvents(weedDay) {
    // Define variables based on this.state.events
    // if statement to check if event matches with time and date of table cell
            return {__html: '<div class="eventHolder">...variables...</div>'};
}

render() {
    return (
        <tr>
            <td dangerouslySetInnerHTML={this.assignEvents(0)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(1)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(2)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(3)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(4)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(5)}></td>
            <td dangerouslySetInnerHTML={this.assignEvents(6)}></td>
        </tr>
    );
}

Answer 1

@Matheus Alves我在CodeSandbox上创建了这个示例项目，它似乎正在运行。 https://codesandbox.io/s/48zwkxj1n9

这与您的用例类似吗？如果没有，你能重新创建你在CodeSandbox中看到的错误吗？

React：在状态更新时调用dangerouslySetInnerHTML

1 个答案: