Reactjs 将Onclick值传递给另一个组件

Javascript和React的新功能。。使用它只是为了制作练习用的UI

我似乎无法将我获得的OnClick值传递给另一个组件，即使是作为儿童道具。 我开始觉得这不是一个好办法。。我可以将onClick的值传递给Checkkey函数并在MainList中呈现它吗。。。。我试图在OnClick函数中将id的值传递给Checkkey

我的逻辑是，每当用户单击侧边栏列表时，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 MainList扩展了React.Component{
render（）{
返回(
);
}
}

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

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

类列表区域扩展了React.Component{
onClick（键d）{
控制台日志（keyd）；
//这可以接受吗？
}
render（）{
var行=[]；
this.props.listlinkarray.forEach（（linklist）=>{
rows.push（）；
});
返回(
井口
{rows}
);
}
}
类ListArray扩展了React.Component{
getComponent（keyd）{
this.props.onClick（keyd）；
}
render（）{
返回(
{this.props.linklist.name}

);
}
}

希望将onclick值传递给此函数，以便在用户单击列表项时使用它更改视图

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

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

功能检查键（道具）{
var keydata=props.keydata
if（keydata==1）{
返回；
}else if（keydata==2）
返回；
否则返回
}

id来自的数组

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


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

var ListNameAndLinks=[
{name:'ABC'，id:1}，
{name:'BCD'，id:2}
];
ReactDOM.render（，document.getElementById（'container'））；

坚持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>
      );
    }
}

不要将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>;
  }
}

类ListItem扩展了React.Component{
render（）{
return
{this.props.linklist.name}
；
}
}

不要使用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'));

功能检查键（道具）{
var keydata=props.keydata
返回React.createElement（props.keyData）；
}
变量ListNameAndLinks=[
{name:'ABC'，id:'UIone'}，
{name:'BCD'，id:'UItwo'}
];
ReactDOM.render（，document.getElementById（'container'））；

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