javascript - 将 prop 传递给另一个组件并在 View 上渲染

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>

我有一个关于如何将 props 传递给 Form 组件的问题。现在，SideBar 组件列出了所有链接，以及我单击其中一个链接的所有内容，我可以通过 console.log 获取信息。但我不知道如何将它传递给其他组件并在 View 上呈现。谢谢

例如:(这是一个侧边栏组件)301-abc302-efg303-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 的 pops，您可以在 onItemclick 中使用它> 我使用的方法并传递您的项目。

this.props.selectedData(item);

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

希望它对你有用..!!