Reactjs 将道具作为对象传递给另一个组件

我有两个组件Editor.js和Overview.js，我想把道具作为对象传递给Overview.js。我想将返回的对象即fis传递给Overview组件。我是否可以像下面这样返回箭头函数的内部返回：不确定是否是正确的方法

return (<Overview fis={this.props.fis} />)

Overview.js

class Overview extends React.Component{
    constructor(props, context){
    super(props, context);
    }
  const passingfunction = (passedvalue) =>
   {
     //Do something
   }
    render(){
        return (<Editor function={passingfunction}/>)
            }
}

Editor.js

class Editor extends React.Component{
    constructor(props, context){
    super(props, context);
    }
const display = () =>{
        for(let i=0; i<Data.length; i++)
        {
          if(id == Data[i].ID)
          {
          props.function(Data[i]);
          } 
        }
        }
    render(){
        return (
      <Button variant="primary"onClick={() => this.display()}>VIEW</Button>)
            }
}

---

我们可以将一个对象作为道具直接传递给另一个组件。您在显示中编写的代码是错误的，因为这在循环中，超出了循环外的范围

在下面的代码中，最初将fisNewData设置为null，然后 单击后，将使用过滤数据设置该值。fisNewData将 作为道具传递给概览组件

---

问题不清楚，是否要将对象从子组件传递回父组件？@AjayGhosh是的，我想将返回的fis从Editor.js传递到Overview.js。如果是，请在Overview.js中定义一个函数。将函数作为道具从overview.js传递到editor.js。从editor.js文件中调用该函数，并使用需要作为参数传递的值。应该可以这样做。有什么问题吗？从display函数内部调用传递的函数。display中的“id”来自何处？您最好使用display=id=>Data.findd=>id==d.id；

class Editor extends React.Component{
    constructor(props, context){
    super(props, context);
    }
const display = () =>{
        for(let i=0; i<Data.length; i++)
        {
          if(id == Data[i].ID)
          {
          props.function(Data[i]);
          } 
        }
        }
    render(){
        return (
      <Button variant="primary"onClick={() => this.display()}>VIEW</Button>)
            }
}

  class Editor extends React.Component {
      state = { fisNewData: null };
      display = () => {
        const fis = Data && Data.filter(v => v.ID === id);
        this.setState({ fisNewData: fis });
      };

      render() {
        const { fisNewData } = this.state;
        return (
          <>
            <Button variant="primary" onClick={() => this.display()}>
              VIEW
            </Button>
            {fisNewData.length ? <Overview fis={fisNewData} /> : null}
          </>
        );
      }
    }