如何更新使用ReactDOM.render（）呈現的React組件的道具

Question

我正在嘗試將反應集成到我的angularjs webapp中。

在我的控制器中，我創建了組件，該組件最初具有空的數組道具。 當應用程序完成初始化時，我想再次更新道具。 我是通過再次調用ReactDOM.render()執行此操作，還是可以保留對此實例的引用並執行類似updateProps(newProps) ？

這是從我的控制器調用的：

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

然后當數據完成加載時，我需要使用完整數組更新currencyTabs ...

我理解如何反應組件道具更新從父級到子級，但我不知道如何從普通JS中做到這一點。

Answer 1

這里沒有魔法，你只需要重新渲染它。

只需將渲染包裝到函數中，例如：

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

}

並在加載/更新數據后調用它。

或者，您選擇從內部加載數據，從長遠來看，這可能是更好的選擇。

如果你有內部狀態，這可能有點難以處理。 您可以考慮轉移到僅支持道具的組件（但由於您沒有共享反應組件的任何相關代碼，因此很難說）

它看起來如何的一個小例子

 // 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> 

Answer 2

您的NavBar組件具有可以使用生命周期方法更新的狀態。 沒有你的代碼，很難確定，但我想你想要的東西

class NavBar extends Component {
  state: { currencyTabs: [] }

  componentWillRecieveProps(nextProps) {
    if (this.props.currencyTabs !== nextProps.currencyTabs) {
      this.setState({ currencyTabs: nextProps.currencyTabs })
    }
  }

  render() {
    return (
      <div>
        {this.state.currencyTabs.map(button => (
          <span>{currency}</span>
        )}
      </div>
    )
  }
}

當您的ReactDOM.render方法中的currencyTabs prop更改時，該組件將重新呈現並且將反映更改