これは、親コンポーネントのメソッドをReactの子に渡す方法ですか？

Question

私は、子コンポーネントがどのように親メソッドにアクセスするかを説明するコーディングの本のセクションで説明します。

子から親に通信する方法は、親から子へコールバックを渡すことです。コールバックは、特定のタスクを達成するために呼び出すことができます。この場合、createIssueをIssueTableからIssueAddへのコールバックプロパティとして渡します。子からは、ハンドラーで渡された関数を呼び出して新しい問題を作成するだけです。

著者は、彼はおそらくIssueAdd（子）右回転にIssueList（親）を意味IssueAdd（兄弟）にIssueTable（兄弟）に言及？

私たちはIssueTableはありません、IssueAddに兄弟れ見ることができました... IssueListからの戻りJSXを調べることによって、ちょうど

を思うだろうか？

const contentNode = document.getElementById('contents'); 

class IssueFilter extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div> 
     This is placeholder for the Issue Filter.{this.props.name} 
     {this.props.age} 
     </div> 
    ); 
    } 
} 

const IssueRow = props => (
    <tr> 
    <td>{props.issue.id}</td> 
    <td>{props.issue.status}</td> 
    <td>{props.issue.owner}</td> 
    <td>{props.issue.created.toDateString()}</td> 
    <td>{props.issue.effort}</td> 
    <td>{props.issue.completionDate ? props.issue.completionDate.toDateString() : ''}</td> 
    <td>{props.issue.title}</td> 
    </tr> 
); 

function IssueTable(props) { 
    const issueRows = props.issues.map(issue => <IssueRow key={issue.id} issue={issue} />); 
    return (
    <table className="bordered-table"> 
     <thead> 
     <tr> 
      <th>Id</th> 
      <th>Status</th> 
      <th>Owner</th> 
      <th>Created</th> 
      <th>Effort</th> 
      <th>Completion Date</th> 
      <th>Title</th> 
     </tr> 
     </thead> 
     <tbody>{issueRows}</tbody> 
    </table> 
); 
} 

class IssueAdd extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(e) { 
    e.preventDefault(); 
    var form = document.forms.issueAdd; 
    console.log('form', document.forms); 
    this.props.createIssue({ 
     owner: form.owner.value, 
     title: form.title.value, 
     status: 'New', 
     created: new Date() 
    }); 
    //clear the form for the next input 
    form.owner.value = ''; 
    form.title.value = ''; 
    } 

    render() { 
    return (
     <div> 
     <form name="issueAdd" onSubmit={this.handleSubmit}> 
      <input type="text" name="owner" placeholder="Owner" /> 
      <input type="text" name="title" placeholder="Title" /> 
      <button>Add</button> 
     </form> 
     </div> 
    ); 
    } 
} 

class IssueList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { issues: [] }; 
    this.createIssue = this.createIssue.bind(this); 
    } 

    componentDidMount() { 
    this.loadData(); 
    } 

    loadData() { 
    fetch('/api/issues') 
     .then(response => response.json()) 
     .then(data => { 
     console.log('Total count of records:', data._metadata.total_count); 
     data.records.forEach(issue => { 
      issue.created = new Date(issue.created); 
      if (issue.completionDate) issue.completionDate = new Date(issue.completionDate); 
     }); 
     this.setState({ issues: data.records }); 
     }) 
     .catch(err => { 
     console.log(err); 
     }); 
    } 

    createIssue(newIssue) { 
    fetch('/api/issues', { 
     method: 'POST', 
     headers: { 'Content-Type': 'application/json' }, 
     body: JSON.stringify(newIssue) 
    }) 
     .then(response => { 
     if (response.ok) { 
      response.json().then(updatedIssue => { 
      updatedIssue.created = new Date(updatedIssue.created); 
      if (updatedIssue.completionDate) updatedIssue.completionDate = new Date(updatedIssue.completionDate); 
      const newIssues = this.state.issues.concat(updatedIssue); 
      this.setState({ issues: newIssues }); 
      }); //**/ 
     } else { 
      response.json().then(error => { 
      alert('Failed to add issue: ' + error.message); 
      }); 
     } 
     }) 
     .catch(err => { 
     alert('Error in sending data to server: ' + err.message); 
     }); 
    } 

    render() { 
    return (
     <div> 
     <h1>Issue Tracker</h1> 
     <IssueFilter /> 
     <hr /> 
     <IssueTable issues={this.state.issues} /> 
     <hr /> 
     <IssueAdd createIssue={this.createIssue} /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<IssueList />, contentNode); 

要するに、すべての人が親で宣言された関数を活用する必要があります。

const contentNode = document.getElementById('contents'); 


class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 
     this.props.someFunc; //So naming this prop someFunc will just help us identify this prop should get the function from the parent? 
    } 
} 

class Parent extends React.component{ 
    constructor(props) { 
    super(props); 
     this.someFunc = this.someFunc.bind(this); 
    } 

    someFunc(){ 
    .... 
    } 

    render() { 
    return (
     <div> 
     <ChildComponent someFunc={this.someFunc} /> // Parent's someFunc gets passed as a value to the ChildComponent's prop which is someFunc? 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Parent />, contentNode); 

Answer 1

はいIssueTableとIssueAddはコードから、実際の兄弟であるあなたが投稿スニペット。 this.props.someFuncはどんな目的を果たしません。上記のスニペットで

class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 
     this.props.someFunc; //So naming this prop someFunc will just help us identify this prop should get the function from the parent? 
    } 
} 

、それはちょうどあなたがParentComponentから送られたが、何も起こりません機能を返します。

ChildComponentのアクションから親の状態を変更または変更する予定がある場合は、以下のスニペットを参考にしてください。