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 文件。

我只想在 onClick 事件中创建指向另一个组件的链接。我遇到的问题是我的 handleClick 下的组件没有呈现。

原文由 user3450754 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

If you want to render Chockers component on the click of item, then write it like this, create the state variable and set it 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.net/ocg4ebdf/

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您没有渲染任何东西。您只需要从渲染函数本身返回 Chokers 组件。

创建一些状态变量并将该变量设置为 true，以便在此变量检查后您可以渲染 Chokers 组件。

原文由 SatyaDash 发布，翻译遵循 CC BY-SA 3.0 许可协议