在React中，你將如何動態渲染一個組件？

我想沿着以下的線路做一些事情：

Menu Item 1 
Menu Item 2 
Menu Item 3 

Target(Where component is loaded)

在點擊菜單項上，渲染目標內的相關部件。有沒有辦法動態加載組件？即

<{menuItemName} />

我現在這樣做的方法是可怕的，緩慢的，和繁瑣（和不工作），並涉及

<li onClick=this.setState({menuItem:"MenuItem1"})>Menu Item 1</li> 
<li onClick=this.setState({menuItem:"MenuItem2"})>Menu Item 2</li> 
<li onClick=this.setState({menuItem:"MenuItem3"})>Menu Item 3</li> 

<{this.state.menuItem} />

我知道一定有這樣做的更好的方法，但我目前沒有React詞彙表來尋找我正在尋找的解決方案。我也意識到，在渲染方法中設置狀態是一個很大的禁忌，但我正在努力尋找替代方案。

感謝您的幫助。

來源

2016-09-28 Jordan Ratanadawong

在渲染中調用setState是錯誤的，但是您只是附加了一個事件偵聽器。即將到來的問題是一個jsx表示，它編譯爲React.createElement（ReactComponent，{}），其中第一個參數是React類（也可以是HTML元素的字符串）。檢查這個問題的答案React/JSX Dynamic Component Name。

但是，解決你的問題，你可以做這樣的事情

handleEventClick(itemId) { 
    return() => { 
    this.setState({ 
    itemId 
    }); 
    } 
} 

<li onClick={::this.handleEventClick("itemId")}>Item Name</li> 

render() { 
    const { itemId } = this.state; 
    let renderComponent; 
    if (itemId === 'menu1') { 
    renderComponent = <MenuComponent1 />; 
    } else if ....other components 

    return (
    ... 
    <li onClick={::this.handleEventClick("itemId")></li>... 
    {renderComponent} 
); 

}

來源

2016-09-28 11:24:03 jssridhar

如你所說，你必須保存在某個地方選擇的項目;例如在組件的狀態然後顯示相應的組件。

const Component1 = (props) => <div>My component 1</div>; 
const Component2 = (props) => <div>My component 2</div>; 
const Component3 = (props) => <div>My component 3</div>; 

// associate the item id with 
// the corresponding component 
const components = { 
    1: <Component1 />, 
    2: <Component2 />, 
    3: <Component3 />, 
} 

class MyApp extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { selectedItem: 1 } 
    } 

    handleItemClick(itemId) { 
    this.setState({ selectedItem: itemId }); 
    } 

    render() { 
    return (
     <div> 
     <li onClick={() => this.handleItemClick(1)}>Item 1</li> 
     <li onClick={() => this.handleItemClick(2)}>Item 2</li> 
     <li onClick={() => this.handleItemClick(3)}>Item 2</li> 
     {components[this.state.selectedItem]} 
     </div> 
    ); 
    } 
}

或者可以店使用陣營路由器的URL當前選定的項目。

檢查https://react-router.now.sh/quick-start了。

來源

2016-09-28 12:30:55 VincentCordobes

在React中，你將如何動態渲染一個組件？

回答

相關問題