如何解決來自父母的孩子的功能反應？

Question

我的React應用程序有三個組件。 其中兩個是子組件，另一個是父組件。 我需要通過父組件將數據（projectId）從一個子組件傳遞給另一個子組件，並在接收到數據后觸發一個函數。 作為我的例子，我將projectId從ChildOne發送到Parent，然后將projectId從Parent發送到ChildTwo。 ChildTwo有一個名為setProject（projectId）的函數，我需要在收到projectID后觸發它。 問題是我無法通過單擊ChildOne中的按鈕來獲取在ChildTwo中觸發的函數getProjectId。 我也嘗試過componentDidMount和componentWillReceiveProps，它們對我不起作用。 我怎樣才能做到這一點？

這是我嘗試過的

ChildOne：

class ChildOne extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          projectId: 3,
        };
    }

    sendProjectId = (projectId) => {
       this.props.sendId(projectId)
    }

    render() {
       return(
         <button onClick={() => this.sendProjectId(this.state.projectId)}>
            Click
         </button>
       )
    }
}

家長：

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          projectId: '',
        };
    }

    getId = (proId) => {
       this.setState({
          projectId : proId
       })
    }

    render() {
       return(
         <div>
           <CildOne sendId={this.getId} />

           <CildTwo sendOneId={this.state.projectId} />
         </div>
       )
    }
}

ChildTwo：

class ChildTwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          projectId: '',
        };
    }

    getProjectId = (this.props.sendOneId) => {
       //Do something with this.props.sendOneId
    }

    render() {
       return(
         <div></div>
       )
    }
}

Answer 1

這取決於ChildTwo希望用所述數據完成什么。

情況1：

ChildTwo打算使用相應的projectId獲取一些數據並將其顯示在組件中。 然后，您可以輕松地在父組件中獲取此數據，並將數據作為props傳遞下來。

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          projectId: '',
          dataForChildTwo: null,
        };
    }

    getId = (proId) => {
       this.setState({
          projectId : proId,
          dataForChildTwo: fetchData(proId)
       })
    }

    render() {
       return(
         <div>
           <CildOne sendId={this.getId} />

           <CildTwo data={this.state.dataForChildTwo} />
         </div>
       )
    }
}

案例2：

ChildTwo打算在projectId更改時對其中的某些內容進行一些更改。 然后，您可以使用componentDidUpdate掛鈎來查看prop是否已更改並對其進行響應。

class ChildTwo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          projectId: '',
        };
    }

    getProjectId = (this.props.sendOneId) => {
       //Do something with this.props.sendOneId
    }

    componentDidUpdate(prevProps) {
      if(this.props.projectId!==prevProps.projectId) {
        // do something
      }
    }

    render() {
       return(
         <div></div>
       )
    }
}

案例3 ：

如果上述任何一種情況都不適合您，則可以在projectId使用key屬性更改時手動重新加載完整組件：

<CildTwo key={this.state.projectId} sendOneId={this.state.projectId} />

注意：這會非常不必要地重新加載整個組件。

Answer 2

如果你想設置一些狀態，我們你可以嘗試一個功能組件或鈎子

function ChildOne(props) {
  const [projectId, setProjectId] = useState(3);
  function sendProjectId(data){
       props.sendId(projectId)
    }
   return(
         <button onClick={() => sendProjectId(projectId)}>
            Click
         </button>
       )
}



function ChildTwo(props) {
  const [state, setState] = useState('')
  function getProjectId(data) {
       //Do something with this.props.sendOneId
       console.log(`data here ${data}`)
       return false;
    }
    getProjectId(props.sendOneId)
  return (
    <div>
    </div>
  )
}


function Parent(){
   const [projectId, setProjectId] = useState('');
   function getId(proId) {
     setProjectId(proId)
   }
   return(
         <div>
           <ChildOne sendId={getId} />

           <ChildTwo sendOneId={projectId} />
         </div>
       )
}

Answer 3

你在ChildTwo組件的getProjectId函數中犯了一個錯誤。

您的函數無法從prop接收任何參數。

所以，你的功能應該是這樣的：

getProjectId = (sendOneId) => {
   //Do something with this.props.sendOneId
}

然后你應該像這樣使用componentWillReceiveProps ：

componentWillReceiveProps(nextProps) {
  if (this.props.sendOneId !== nextProps.sendOneId) {
    this.getProjectId(nextProps.sendOneId);
  }
}

這是我為解決您的問題而創建的工作代碼框示例： https ：//codesandbox.io/s/5v4rn7qnll

Answer 4

您應該使用componentDidUpdate和條件來檢查在sendOneId更改時是否需要更新處於sendOneId state 。 然后，您可以使用setState的回調來調用getProjectId ：

componentDidUpdate() {
  const { projectId: currentProjectId } = this.state;
  const { sendOneId: projectId } = this.props;
  if (projectId !== currentProjectId) {
    this.setState({ projectId }, () => this.getProjectId());
  }
}

完整的工作示例：

 class ChildOne extends React.Component { constructor(props) { super(props); this.state = { projectId: 3, }; } sendProjectId = (projectId) => { this.props.sendId(projectId) } render() { return ( <button onClick={() => this.sendProjectId(this.state.projectId)}> Click </button> ); } } class Parent extends React.Component { constructor(props) { super(props); this.state = { projectId: '', }; } getId = (projectId) => { this.setState({ projectId }); } render() { return ( <div> <ChildOne sendId={this.getId} /> <ChildTwo sendOneId={this.state.projectId} /> </div> ) } } class ChildTwo extends React.Component { constructor(props) { super(props); this.state = { projectId: '', }; } componentDidUpdate() { const { projectId: currentProjectId } = this.state; const { sendOneId: projectId } = this.props; if (projectId !== currentProjectId) { this.setState({ projectId }, () => this.getProjectId()); } } getProjectId = () => { console.log(this.state.projectId); } render() { return ( <div></div> ); } } ReactDOM.render( <Parent />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"></div>