React-如何在render之外的函數中渲染組件以及如何在render之外執行相同的函數？

Question

我在render之外有一個功能。 該函數返回（有條件地）一個組件，該函數不是在渲染內部而是在componentWillReceiveProps內部（由於其他事實而必需）觸發的。 我的問題是該函數最終不會返回該組件，我也不知道為什么。 當我在render中調用該函數時，它可以工作，但是我不能做到這一點，因為必須在componentWillReceiveProps中調用它。 有任何想法嗎？ 謝謝！！

class App extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
      this.getData(nextProps.user)
    }
  }

  getData() {
    if (...) {
      return <Child />
    }
  }

  render() {
    return (
      <div>{this.getData}</div>
    );
  }
}

const Child = () => {
  return <h1>Hello</h1>
}

Answer 1

在構造函數中創建一個名為data的狀態，如下所示：

constructor(props){
    super(props);
    this.state={data:""};
}

現在， {this.getdata}里面render()與{this.state.data}

還可以如下替換componentWillReceiveProps：

componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
        var newdata = this.getData(nextProps.user)
        this.setState({data:newdata});
    }
}

Answer 2

您只能在render中返回JSX數據，而不能在要渲染的其他生命周期函數中返回。 而且render方法是純凈的，因此對於相同的輸入，它返回相同的輸出，因此react可以通過維護虛擬dom來正確地針對相同的性能進行優化，因此您只需編寫

class App extends React.Component {
      getData() {
        if (...) {
            return <Child />
        }
      }
      render() {
          return (
              <div>
                {this.getData()}
              </div>
          )
      }
}

const Child = () => {
    return <h1>Hello</h1>
}

如果您使用React.PureComponent進一步優化，那么它也將具有相同的效果，以便在更改道具時調用render。 React.PureComponent通過淺層shouldComponentUpdate和狀態比較實現了shouldComponentUpdate 。

class App extends React.PureComponent {
      componentWillReceiveProps(nextProps) {
         if (nextProps.user != this.props.user) {
         this.getData(nextProps.user)
         }
      }
      getData() {
        if (...) {
            return <Child />
        }
      }
      render() {
          return (
              <div>
                {this.getData()}
              </div>
          )
      }
}

但是，要執行您想要的操作，您實際上將日期存儲在組件狀態下，然后根據狀態在render方法中渲染數據

class App extends React.Component {
      constructor(props) {
         super(props);
         this.state {
             data: this.getData(props)
         }
      }
      componentWillReceiveProps(nextProps) {
         if (nextProps.user != this.props.user) {
            this.getData(nextProps.user)
         }
      }
      getData(props) {
        if (...) {
            const newData;
            // update newData based on receivedProps here
            // store the data in state
            this.setState({data: newData});
        }
        return [];
      }
      render() {
          return (
              <div>
                {this.state.data.map((obj) => return <Child data={obj}/>)}
              </div>
          )
      }
}

Answer 3

因為除了render以外，您不能從其他掛鈎中返回children ，所以您需要將它們保持在一個狀態：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someChildren: null
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
      this.setState({ someChildren: this.getData(nextProps.user) });
    }
  }
  getData() {
    if (...) {
      return <Child />;
    }
    return null
  }
  render() {
    return <div>{this.state.someChildren}</div>;
  }
}

Answer 4

當您的組件將收到新的道具時，它將自動重新渲染，就像執行以下操作一樣，使您的組件重新渲染並進行更新：

class App extends React.Component {
  getData: () => {
    if (...) {
      return <Child />
    }
    return null;
  };

  render() {
    return (
      <div>{this.getData()}</div>
    );
  }
}

Answer 5

componentWillReceiveProps是React生命周期方法，一旦您的React Component收到父對象的支持，就會調用該方法。 例如，可以在其中執行的操作將更新您正在做什么的狀態，而不是調用getDate方法，該方法將返回React組件。

可能的實現方式可能是：

class App extends React.Component {

  getData() {
    const { user } = this.props;
    return user ? <Child /> : <div />
  }
  render() {
      return (
          <div>
            {this.getData()}
          </div>
      )
  }
}

const Child = () => {
  return <h1>Hello</h1>
}