将 Onclick 值传递给另一个组件答案

【问题标题】：Passing Onclick value to another component将 Onclick 值传递给另一个组件
【发布时间】：2017-06-10 20:56:07
【问题描述】：

Javascript 和 React 的新手.. 使用它只是为了制作 UI 以供练习

我似乎无法将获得的 OnClick 值作为子道具传递给另一个组件。我开始觉得这不是一个好方法..我能否将 onClick 的值传递给 Checkkey 函数并将其呈现在 MainList 中....我试图将 id 的值传递给 OnClick 函数中的 Checkkey .

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

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'));

【问题讨论】：

标签： reactjs

【解决方案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'));

【讨论】：