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

时间:2019-04-26 05:32:43

标签: javascript ruby-on-rails reactjs

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>

我对如何将道具传递给Form组件有疑问。现在,SideBar组件列出了所有链接,所有我单击的链接之一都可以console.log信息。但是我不知道如何在其他组件上传递它并在视图上呈现。谢谢

例如:(这是一个侧边栏componenet) 301-abc 302-efg 303-rgk

当用户单击301-abc时,它将显示与ID相关的详细信息,例如颜色,样式。

2 个答案:

答案 0 :(得分:1)

SideBar组件一样,您必须创建一个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)
    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}>
    );
  }

}

在上面的代码中,我将pass方法命名为 selectedData ,您可以在我使用的 onItemclick 方法中使用它并传递您的物品。

this.props.selectedData(item);

因此,您将在Form组件中获得该项目并设置状态,然后可以在Form组件中显示它,也可以将其传递给另一个组件。

希望它对您有用.. !!

答案 1 :(得分:0)

如果有很多嵌套组件需要彼此了解状态/信息,那么最好的选择是选择状态管理,例如reduxflux等。任务是保持组件之间的数据,并帮助您保持单向数据流的反应。 不过,如果您出于某种原因不想使用状态管理机制。您可以这样实现(丑陋): https://stackblitz.com/edit/react-pkn3cu