reactjs onclick顯示組件

Question

為什么我的組件不渲染？

import React, { Component } from 'react';
import {Chokers, Bracelets, FRings, MRings} from './AllItems.js'

    class App extends Component {

      handleClick(e){

        <Chokers chokers={this.props.items.Chokers}/>
      }
      render() {
        return (
            <div className="App">
                <ul style={{display: 'inline'}}>
                    <li onClick={this.handleClick.bind(this)}>Chokers</li>
                    <li><a href=""></a><Bracelets bracelets={this.props.items.Bracelets}/>Bracelets</li>
                    <li><FRings frings={this.props.items.FRings}/>Rings for Women</li>
                    <li><MRings mrings={this.props.items.MRings}/>Rings for Men</li>
                </ul>
            </div>
        );
      }
    }

    export default App;

基本上，我的this.props.items.Chokers示例在傳遞的json文件上調用a。

我只想在onClick事件中創建到另一個組件的鏈接。 我遇到的問題是handleClick下的Component無法渲染。

Answer 1

如果要在項目的單擊上渲染Chockers組件，則將其編寫如下，創建state變量並將其設置為true onClick ：

class App extends React.Component {
    constructor(){
        super();
        this.state = {render:''}
    }
    handleClick(compName, e){
        console.log(compName);
        this.setState({render:compName});        
    }
    _renderSubComp(){
        switch(this.state.render){
            case 'chockers': return <Chokers/>
            case 'bracelets' : return <Bracelets/>
            case 'rings': return <FRings/>
        }
    }
    render() {
        return (
            <div className="App">
                <ul style={{display: 'inline'}}>
                    <li onClick={this.handleClick.bind(this, 'chockers')}>Chokers</li>
                    <li onClick={this.handleClick.bind(this, 'bracelets')}>Bracelets</li>
                    <li onClick={this.handleClick.bind(this, 'rings')}>Rings for Women</li>
                </ul>
                {this._renderSubComp()}
            </div>
        );
    }
}
class Chokers extends React.Component {
    render(){
        return <div>Inside Chockers</div>
    }
}
class FRings extends React.Component {
    render(){
        return <div>Inside FRings</div>
    }
}
class Bracelets extends React.Component {
    render(){
        return <div>Inside Bracelets</div>
    }
}
ReactDOM.render(<App />, document.getElementById('container'));

檢查jsfiddle的工作示例： https : jsfiddle

Answer 2

您沒有渲染任何東西，您只需要從render函數本身返回Chokers組件即可。

創建一些狀態變量並將該變量設置為true，以便在檢查此變量時可以呈現Chokers組件。

Answer 3

嘗試以下操作。

import React, { Component } from 'react';
import {Chokers, Bracelets, FRings, MRings} from './AllItems.js'

    class App extends Component {
      var flag;
      handleClick(e){
       flag = true;
       render() {
        return (
        <Chokers chokers={this.props.items.Chokers}/>
);}
      }
      if(!flag){
      render() {
        return (
            <div className="App">
                <ul style={{display: 'inline'}}>
                    <li onClick={this.handleClick.bind(this)}>Chokers</li>
                    <li><a href=""></a><Bracelets bracelets={this.props.items.Bracelets}/>Bracelets</li>
                    <li><FRings frings={this.props.items.FRings}/>Rings for Women</li>
                    <li><MRings mrings={this.props.items.MRings}/>Rings for Men</li>
                </ul>
            </div>
        );
      }
}
    }

    export default App;