对象从根组件传递为prop，而不是呈现更改 [英] Object passed as prop from root component, not rendering changes

问题描述

我正在尝试将React实现到游戏引擎。我只是创建一个新的引擎实例并作为prop传递给React root。我无法更改引擎。

I am trying to implement React to a game engine. I am just creating a new engine instance and passing as prop to React root. And I can't change Engine.

const engine = new Engine(configurator);

ReactDOM.render(
  <App engine={engine}/>,
  document.getElementById('root') as HTMLElement
);

App.tsx

export interface ComponentProps {
  engine: Engine;
}

class App extends React.Component<ComponentProps> {
  render() {
    return (
      <div className="container-fluid">
        <SaveList saves={this.props.engine.savedGames}
                  newCharacter={this.props.engine.newGame.bind(this.props.engine)}
        />
      </div>
    );
  }
}

问题是我每次都无法更新我的组件引擎属性的变化。让我们假设一个显示已保存游戏的 SaveList 组件，我正在传递这样的道具。

The problem is I can't update my components whenever a property of engine changes. Let's assume a SaveList component that shows saved games, I am passing props like this.

<SaveList 
   saves={this.props.engine.savedGames} 
   newCharacter={this.props.engine.newGame.bind(this.props.engine)}
/>

saveList.tsx

export interface SaveListProps {
  saves: Save[];
  newCharacter: () => any;
}

class SaveList extends React.Component<SaveListProps> {
  render() {
    return (
      <ul className="list-group">
        {this.props.saves.map((save, i) => {
          return <li key={i} className="list-group-item d-flex justify-content-between align-items-center">
            {save.characterName}
            <span className="badge badge-primary badge-pill">Days: {save.days}</span>
          </li>
        })}
      </ul>
    );
  }
}

每当我点击新游戏按钮时，我都可以看到对象实际上正在改变，新游戏被推入 engine.savedGames 。但我无法使 SaveList 重新呈现更改。我还可以看到使用React开发人员工具将新元素推送到数组中

Whenenever I click new game button, I can see that object is actually changing and a new game is pushed into engine.savedGames. But I can't make SaveList to re-render the change. I can also see the new element pushed into array using React developer tools

我不知道如何处理这种双向绑定问题。如何使用React连接此对象并观察更改并在更改时重新渲染？

I am not sure how can I handle this two way binding issue. How can I connect this object and watch changes and re-render on change using React?

推荐答案

您的顶级应用程序永远不会重新渲染当引擎发生变化时，因为它存在于React之外。您需要将引擎置于顶层的州，并通过调用 setState 进行更改或使用 forceUpdate api强制React在您的引擎更改时更新。

Your top level App will never rerender when engine changes because it exists outside of React. You need to either put your engine into state at the top level, and change it through calls to setState or use the forceUpdate api to force React to update when your engine changes.

如果您愿意将MobX作为一个额外的依赖，这可能就像将引擎标记为可观察的以及将其作为观察者使用的所有组件一样简单。 （这适用于OP）

If you're willing to take on MobX as an extra dependency, this could potentially be as easy as just marking the engine as an observable and all components that consume it as observers. (this worked for the OP)

作为旁注，看起来你正在做的事与React本身不一致。 React旨在控制您的应用呈现的时间，但您已使用外部引擎来指示何时应呈现内容。如果您要与引擎紧密结合使用独立的虚拟DOM库，则可能会提供更好的服务。也许像lit-html之类的东西。

As a sidenote, it seems like what you’re doing is at odds with React itself. React is meant to control when your app renders, but you’ve used an external engine to dictate when things should render. You might be served better if you were to use a standalone virtual DOM library in close conjunction with your engine. Something like lit-html perhaps.

这篇关于对象从根组件传递为prop，而不是呈现更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！