Javascript 将道具传递给另一个组件并在视图上渲染 从“./Form”导入表单 类侧栏扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 项目：“” }; } render（）{ 返回( this.props.products.map（（x）=>{ 让boundItemClick=this.onItemClick.bind（this，x）； return{x.id}-{x.style\u no}-{x.color} })); } onItemClick=函数（项，e）{ console.log（项目） } } 导出默认边栏 从“./SideBar”导入侧栏 类形式扩展了React.Component{ render（）{ return（）； } } 导出默认表单 **强文本**

我有一个关于如何传递道具以形成组件的问题。现在，边栏组件列出了所有的链接，我点击了其中一个链接，我可以控制台。记录信息。但我不知道如何将其传递到另一个组件并在视图上渲染。多谢各位

例如：（这是一个边栏组件） 301 abc 302 efg 303 rgk

---

当用户单击301 abc时，它将显示相应的详细信息，如id、颜色和样式

同样地，

侧栏

组件您必须创建一个

表单

组件

您必须使用产品细节创建状态

import Form from './Form'
  class SideBar extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    item: '' 
  };
}
render() {
  return (
    this.props.products.map((x) => {
    let boundItemClick = this.onItemClick.bind(this, x);
    return <li key={x.id} onClick={boundItemClick}>{x.id}-{x.style_no}-{x.color}</li>

    }));
  }

  onItemClick= function(item, e) {  
    console.log(item)
  }
 }

export default SideBar
import SideBar from './SideBar'

class Form extends React.Component{
  render(){

  return();

}
}


 export default Form




**strong text**<div class = first_half><%= react_component("SideBar", {products: 
@products}) %></div>
<div class = second_half><%= react_component("Form", {products: 
@products}) %></div>

类侧栏扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：“”
};
}
render（）{
返回(
this.props.products.map（（x）=>{
让boundItemClick=this.onItemClick.bind（this，x）；
return
{x.id}-{x.style\u no}-{x.color}
}));
}
onItemClick=功能（项目e）{
console.log（项目）
此.props.selectedData（项目）；
}
}
导出默认边栏
从“./SideBar”导入侧栏
类形式扩展了React.Component{
构造函数（）{
此.state={
产品：[{
id:'302'，
样式编号：“abc”，
颜色：“红色”
}, {
id:'303'，
样式编号：“abcd”，
颜色：“黑色”
}],
所选数据：{}
};
}
获取选定数据（选定数据）{
这是我的国家({
selectedData：selectedData
});
}
render（）{
报税表（
);
}
}

在上面的代码中，我有一个名为

selectedData

的pops传递方法，您可以在我使用的

onItemclick

方法中使用它并传递您的项目

此.props.selectedData（项目）

因此，您将在

表单

组件中获取该项，并设置您的状态，您可以在

表单

组件中显示该项，还可以传递到另一个组件

---

希望它对你有用

如果有许多嵌套组件需要了解彼此的状态/信息，那么最好的选择是选择状态管理，例如，或等等。状态管理任务是跨组件保存数据，并帮助您保持单向数据流。 尽管如此，如果您出于任何原因不想使用状态管理机制。您可以这样实现它（这很难看）：

---

我如何从侧边栏将该项转换为“onItemClick=function（item，e）{console.log（item）}”，因为函数中的项包含在ViewOK上渲染所需的所有信息。因此，您可以将“方法”作为道具传递给子组件。它将在另一个组件中用作回调函数。因此，您想将所选数据传递给另一个组件并呈现它吗？是的，您能告诉我这一点吗。我不知道怎么做，你们可以想象有两个div，左边是边栏，右边是表单。侧边栏包含100个

。每次使用时，单击其中一个li将支持项目形成。因此，它可以在视图（右div）上呈现“窗体”和“侧边栏”之间的关系是什么？侧边栏中的窗体还是反之亦然？您可以想象有两个div，左为侧边栏，右为窗体。侧边栏包含100个

。每次使用时，单击其中一个li将支持项目形成。因此，它可以在视图（右div）上渲染。您可以再帮我一个问题吗。

class SideBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item: ''
    };
  }
  render() {
    return (
      this.props.products.map((x) => {
        let boundItemClick = this.onItemClick.bind(this, x);
        return <li key={x.id} onClick={boundItemClick}>{x.id} - {x.style_no} - {x.color}</li>
      }));
  }

  onItemClick = function(item, e) {
    console.log(item)
    this.props.selectedData(item);
  }
}
export default SideBar

import SideBar from './SideBar'

class Form extends React.Component {
  constructor() {
    this.state = {
      products: [{
        id: '302',
        style_no: 'abc',
        color: 'red'
      }, {
        id: '303',
        style_no: 'abcd',
        color: 'black'
      }],
      selectedData: {}
    };
  }

  getSelectedData(selectedData) {
    this.setState({
      selectedData: selectedData
    });
  }

  render() {
    return ( 
      <SideBar products = {this.state.products} selectedData={this.getSelectedData}>
    );
  }

}