Question

我有两个组件Editor.js和Overview.js，我想在其中将prop作为对象传递给Overview.js。我想将返回的对象即fis传递给Overview组件。我可以在箭头函数的返回中返回如下所示的内容吗：不确定是否正确的方法

<form id="take_file_form"  class="edit_document ng-pristine no-valid" data-dynamic-pricing-activated="true"  data-dynamic-pricing-url="https://
api.textmaster.com/privateldocuments/Sd9208496831676601735397/
dynamic _pricing- data-dynamic-pricing.refresh-interval-in-sec="128"
action="/authors/tasksJ5d920849683I6700e1735397/start"  accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden"  value="✓">
<input type="hidden"  name="_method" value="patch">
<input type="hidden"  name="authenticity_token" value="Sall2FcgxufyNBTFw4sUlliallY09+EljvfKEFdgzijsullgv+2Q811aggs7BovNytlFShGxjincdOrga78==">                                                                                                                                                                                                             <input id="document_dynamic_author_word_count" type="hidden" name="document[dynamic_author_word_count]" value="8">                                                                                         <input type="submit" name="commit" value="Pegue essa tarefa" class=
"anim btn blue-hg action-btn"> == $0

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

Answer 1

我们可以将对象作为道具直接传递给另一个组件。您在display()中编写的代码是错误的，因为它在循环中，而在循环外部。

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

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

Answer 2

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

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

2 个答案: