强制组件更新更改

Question

我正在尝试让此 componentFunction 在 changeValue 发生的状态更改上使用新数据字段重新呈现，但我不知道哪里出错了。

class Classname extends React.Component {
  constructor() {
    super();
    this.state = {
      value: "OriginalString",
    };
  }

  changeValue = (newString) => {
    this.setState({ value: newString });
    this.forceUpdate();
  };

  componentFunction = () => {
    return (
      <div>
        <component data={this.state.value} />
      </div>
    );
  };

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.changeValue("updatedString");
          }}
        >
          Update
        </button>

        <div className="control-section">
          <DashboardLayoutComponent
            id="dashboard_default"
            columns={5}
            cellSpacing={this.cellSpacing}
            allowResizing={false}
            resizeStop={this.onPanelResize.bind(this)}
          >
            <PanelsDirective>
              <PanelDirective
                sizeX={5}
                sizeY={2}
                row={0}
                col={0}
                content={this.componentFunction}
              />
            </PanelsDirective>
          </DashboardLayoutComponent>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Classname />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

尝试将值作为param传递给componentFunction，然后每次状态值改变时，当前组件重新渲染，触发函数使用新的状态值重新渲染子组件。

class classname extends React.Component {
    constructor() {
        super();
        this.state = {
            value: "OriginalString",
        };
    }

    changeValue = (newString) => {
        this.setState({ value: newString });
        this.forceUpdate();
    }

    componentFunction = (val) => {
        return (
            <div>
                <component data={val} />
            </div>
        );
    }

    render() {
        return (
            <div>
                <button onClick={() => { this.changeValue('updatedString') }}>Update</button>

                <div className="control-section">
                    <DashboardLayoutComponent id="dashboard_default" columns={5} cellSpacing={this.cellSpacing} allowResizing={false} resizeStop={this.onPanelResize.bind(this)} >
                        <PanelsDirective>
                            <PanelDirective sizeX={5} sizeY={2} row={0} col={0} content={this.componentFunction(this.state.value)} />
                        </PanelsDirective>
                    </DashboardLayoutComponent>
                </div>
            </div>
        );
    }
}

Answer 2

问题

此处的问题是 componentFunction 中 this.state.value 的陈旧附件。

解决方案

据我所知，PanelDirective 的 content 属性期望任何 returns 或解析为有效的 JSX (JSX attribute)。提供内容的函数回调、React 组件或 JSX 文字都可以。

回调以重新包含更新的状态。转换为可在渲染组件时包含 current 状态的柯里化函数。附加回调时，您调用第一个函数并传递状态值，返回的函数是 PanelDirective 在调用内容值时将使用的函数。
```
componentFunction = (data) => () => (
  <div>
    <component data={data} />
  </div>
);
```
...
```
<PanelDirective
  sizeX={5}
  sizeY={2}
  row={0}
  col={0}
  content={this.componentFunction(this.state.value)}
/>
```

React 组件。将 componentFucntion 转换为 React 组件并传递.

ComponentFunction = ({ data }) => (
  <div>
    <component data={data} />
  </div>
);

...

<PanelDirective
  sizeX={5}
  sizeY={2}
  row={0}
  col={0}
  content={<ComponentFunction data={this.state.value} />}
/>

JSX 文字

<PanelDirective
  sizeX={5}
  sizeY={2}
  row={0}
  col={0}
  content={
    <div>
      <component data={this.state.value} />
    </div>
  }
/>

此外，如果不是很明显，您应该删除 changeValue 处理程序中的 this.forceUpdate(); 调用。 React 状态更新足以触发组件重新渲染。

强制组件更新更改

Forcing a component to update on change

syncfusion

reactjs

问题

解决方案