javascript - 如何更新使用 ReactDOM.render() 渲染的 React Component 的 props

Question

我正在尝试将 React 集成到我的 angularjs webapp 中。

在我的 Controller 中，我创建了组件，该组件最初具有空的数组属性。当应用程序完成初始化后，我想再次更新 Prop 。我是通过再次调用 ReactDOM.render() 来做到这一点，还是可以保留对此实例的引用并只执行类似 updateProps(newProps) 的操作？

这是从我的 Controller 调用的:

ReactDOM.render(
    <NavBar
        currencyTabs = {[]}
    />, document.getElementById("navbar-root")
);

然后当数据加载完成后，我需要用完整数组更新 currencyTabs ...

我了解 React 组件 props 如何从父级更新到子级，但我不太明白如何从普通 JS 执行此操作。

Answer 1

这里没有魔法，你只需要重新渲染它。

只需将您的渲染包装到一个函数中，例如:

function renderReactNavbar( tabs = [] ) {
  ReactDOM.render(
    <NavBar
        currencyTabs = { tabs }
    />, document.getElementById("navbar-root")
  );

}

并在加载/更新数据后调用它。

或者，您选择从 React 内部加载数据，从长远来看，这可能是更好的选择。

如果您有内部状态，这可能会更难处理。您可以考虑转移到仅支持 Prop 的组件(但由于您不共享您的 React 组件的任何相关代码，所以很难说)

它的外观的一个小例子

// the render method, takes a component and props, and renders it to the page
function renderComponent( component, props ) {
  const target = document.querySelector('#container');
  ReactDOM.render( React.createElement( component, props ), target );
}

// gets the tabs from the input field, splits based on ,
function getTabsFromInput() {
  return document.querySelector('#tabs').value.split(',');
}

// small presentational component, shows the tabs and redirects selection changes through a callback
const Tabs = ({ tabs, selectedTab, onSelectionChanged }) => {
  return tabs && <div>{ tabs.map( (tab, key) => {
    return <h1 key={key} className={classNames( { 'active': key === selectedTab } ) } onClick={ () => onSelectionChanged( key ) }>{ tab }</h1>;
  } ) }</div>;
};

// some initiations
window.addEventListener('load', function() {
  // keep a local variable with the data
  let defaultProps = {
    onSelectionChanged: updateSelection,
    selectedTab: 0,
    tabs: getTabsFromInput()
  };

  // handles selection changes
  function updateSelection( newTab ) {
    defaultProps = {...defaultProps, selectedTab: newTab };
    renderComponent( Tabs, defaultProps );
  }

  // adds an event listener for click events to initiate tab changes
  document.querySelector('#updateTabs').addEventListener('click', function() {
    defaultProps = {...defaultProps, tabs: getTabsFromInput() };
    // render on update
    renderComponent( Tabs, defaultProps );
  });

  // initial render
  renderComponent( Tabs, defaultProps );
});

.active {
  background-color: blue;
}

<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script id="classnames" src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script><div id="container"></div>
<input type="text" value="tab1,tab2" id="tabs" />
<button id="updateTabs" type="button">Update tabs</button>