Question

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相关的详细信息，例如颜色，样式。

Answer 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组件中显示它，也可以将其传递给另一个组件。

希望它对您有用.. !!

Answer 2

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

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

2 个答案: