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下的我的组件没有渲染。

Answer 1

如果您要在点击项目上呈现ListView list = (ListView) findViewById(R.id.listview); list.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent intent = new Intent(this, DisplayMessageActivity.class); startActivity(intent); } });组件，请按照这样的方式编写，创建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'));是否有工作示例：https://jsfiddle.net/ocg4ebdf/

Answer 2

你没有渲染任何东西。你只需要从渲染函数本身返回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;

reactjs onclick显示组件

3 个答案: