は、別のコンポーネントJavaScriptに

Question

新規作成のonClick値を渡して反応..ちょうど練習

のためのUIを作るためにそれを使用して、私は、私も子供の小道具として別のコンポーネントに取得するのOnClick値を渡すように見える傾けます。 これは良いアプローチではないように感じ始めています。私はCheckClick関数にonClickの値を渡してMainListでレンダリングすることができますか？私はidの値をOnClickのCheckkeyに渡そうとしています関数。

私のロジックは、ユーザーがサイドバーのリストをクリックするたびに、divの反対側のビューを別のコンポーネントに変更する必要があるということです。リストにはコンポーネントidまたはdiv idと比較されるidがあり、それに応じてビューが変更されますが、id = 1の場合はレンダリングの条件を使用し、id = 2の場合は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はJavaScriptの命名規則に

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


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

Answer 1

スティックを来て、変数のためのキャメルケースを使用して、そこから配列。私はいくつか変換しましたが、あなたは休憩を取ることができます。

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

子アイテムをループしてレンダリングするときにforEachの代わりにmapを使用すると、簡単でコードが少なくなります。 renderの代わりに1回だけバインドするため、コンストラクタを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> 
     ); 
    } 
} 

有効なHTMLではなく、ulの内側にdivを挿入しないでください。 実行中のように各ループにulを描画せず、代わりに各ループを描画します。

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

あなたのアレイ上でカスタムコンポーネントの名前の種類を持っているとの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')); 

にしてこれを渡す代わりに、switchステートメントを使用しないでください