将 prop 传递给另一个组件并在视图上渲染答案

【问题标题】：Passing prop to another component and render on the view将 prop 传递给另一个组件并在视图上渲染
【发布时间】：2019-04-26 05:32:43
【问题描述】：

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>

我有一个关于如何将道具传递给表单组件的问题。现在，SideBar 组件列出了所有的链接，并且我单击其中一个链接的所有内容，我都可以 console.log 信息。但我不知道如何将它传递给其他组件并在视图上渲染。谢谢

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

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

【问题讨论】：

“表单”和“侧边栏”是什么关系，是侧边栏中的表单还是反之亦然？
你可以想象有两个div，左边是sidebar，右边是form。侧边栏包含 100 个
。每次使用单击其中一个 li 都会将项目支撑到 Form。这样它就可以在视图上渲染（右 div）

【解决方案1】：

同样SideBar 组件，您必须创建构造函数Form 组件。

您必须使用 products 详细信息创建 state。

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

}

在上面的代码中，我将传递方法作为名称为 selectedData 的 pops，您可以在我使用它的 onItemclick 方法中使用它并传递您的项目.

this.props.selectedData(item);

因此，您将在您的Form 组件中获取该项目并设置您的状态，您可以在您的Form 组件中显示它，也可以传递给另一个组件。

希望它对你有用..!!

【讨论】：

如何将项目从 SideBar 支持到 Form "onItemClick= function(item, e) { console.log(item) }" 因为函数中的项目包含我需要渲染的所有信息查看
好的。因此您可以将“方法”作为道具传递给子组件。它将在另一个组件中用作回调函数。
那么，你想将你选择的数据传递给另一个组件并渲染它吗？
是的，你能告诉我这个吗？我不知道该怎么做
你可以想象有两个div，左边是sidebar，右边是form。侧边栏包含 100 个
。每次使用单击其中一个 li 都会将项目支撑到 Form。这样它就可以在视图上渲染（右 div）

【解决方案2】：

如果你有很多嵌套组件需要了解彼此的状态/信息，你最好的选择是选择像redux，flux 之类的状态管理。状态管理任务是持有跨组件的数据，并帮助您保持单向数据流的反应。虽然，如果您出于任何原因不想使用状态管理机制。你可以像这样实现它（这很难看）： https://stackblitz.com/edit/react-pkn3cu

【讨论】：

你能再帮我一个问题吗？