Question

Javascript和React的新功能..使用它来制作实践用户界面

我似乎无法传递OnClick值，即使是作为子道具也可以使用另一个组件。我开始觉得这不是一个好方法..我能够将onClick的值传递给Checkkey函数并在MainList中呈现它....即时尝试将id的值传递给OnClick函数中的Checkkey 。

我的逻辑是，每当用户点击边栏列表时，div中另一边的视图应该更改为另一个组件。该列表的id将与组件id或div id进行比较并相应地更改视图，但是现在我只是在渲染中使用条件，如果id = 1显示一个组件，如果id = 2则显示第二个组件。但是我无法将onOnclick中的id传递给条件组件。

class MainList extends React.Component {

  render() {
  return (
    <div>
  <ListArea listlinkarray={ListNameAndLinks}/>
  <Checkthekey/>

    </div>
  );

 }
}

将值传递给函数中的某个组件是否可以？

 class ListArea extends React.Component {

   onClick(keyd){
    console.log(keyd);

    <Checkthekey keydata={this.props.keyd}/>   // is this acceptable ?
}

  render() {

var rows = [];
 this.props.listlinkarray.forEach((linklist)=>{
    rows.push(<ListArray linklist={linklist} key={linklist.name} onClick={this.onClick.bind(this)}/>);
 });
    return (

      <div> 
     <h3> ListHead </h3>
      {rows}
      </div>
      </div>
    );
  }
}

class ListArray extends React.Component {
  getComponent(keyd) {
   this.props.onClick(keyd);
}
  render() {
 return (
  <div>

       <ul><li onClick={this.getComponent.bind(this,this.props.linklist.id)}>{this.props.linklist.name}</li></ul>
    </div>
    );
  }
}

想要将onclick值传递给此函数，以便每当用户点击列表项时我都可以使用它来更改视图。

function Checkthekey(props) {
   var keydata= props.keydata

     if (keydata == 1) {
    return <UIone />;
  } else if (keydata ==2 )
  return <UItwo />;
   else return <UIone/>
  }

id来自的数组

 var ListNameAndLinks= [
{ name:'ABC', id:1} ,
{ name:'BCD', id:2} 
 ];


  ReactDOM.render(<MainList/>, document.getElementById('container'));

Answer 1

坚持使用JavaScript命名约定并将camelCase用于变量。我转换了一些，但你可以休息。

class MainList extends React.Component {
    constructor(props) {
        super(props);

        this.updateKey = this.updateKey.bind(this);
        this.state = {};
    }
    updateKey(keyData) {
        this.setState({ keyData: keyData });
    }
    render() {
      return (
        <div>
            <ListArea listLinkArray={ListNameAndLinks} updateKey={this.updateKey} />
            <Checkthekey keyData={this.state.keyData}/>
        </div>
      );
    }
}

在循环和渲染子项时使用map而不是forEach，它更容易，代码更少。尽可能在构造函数中绑定而不是render，因为它只会绑定一次而不是每个render。

class ListArray extends React.Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }
    onClick(keyData){
        this.props.updateKey(keyData);
    }
    render() {
        return (
          <div> 
            <h3> ListHead </h3>
            <ul>
                {this.props.listLinkArray.map(linklist => <ListItem linklist={linklist} key={linklist.name} onClick={this.onClick} />)}
            </ul>
            </div>
          </div>
        );
    }
}

不要把div放在ul里面，不是有效的html。不要像你正在做的那样在每个循环上渲染ul，而是在每个循环上渲染li。

class ListItem extends React.Component {
  render() {
    return <li onClick={this.props.onClick.bind(this, this.props.linklist.id)}>{this.props.linklist.name}</li>;
  }
}

不要使用switch语句，而是在数组中使用自定义组件的名称类型并将其传递给createElement

function Checkthekey(props) {
    var keydata= props.keydata

    return React.createElement(props.keyData);
}

 var ListNameAndLinks= [
    { name:'ABC', id: 'UIone'} ,
    { name:'BCD', id: 'UItwo'} 
     ];


ReactDOM.render(<MainList/>, document.getElementById('container'));

将Onclick值传递给另一个组件

1 个答案: