React - 如何在渲染之外的函数内渲染组件并在渲染之外执行相同的函数？

Question

我有一个渲染之外的功能。该函数（有条件地）返回一个组件，该函数不是在渲染内部触发，而是在 componentWillReceiveProps 内部触发（由于其他事实，这是必要的）。 我的问题是函数最终没有返回组件，我不知道为什么。当我在渲染中调用该函数时，它可以工作，但我不能这样做，因为我必须在 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 之外，您不能从其他钩子返回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 3

当您的组件收到新的道具时，它会自动重新渲染，如下所示，您应该让您的组件重新渲染并更新：

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

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

Answer 4

componentWillReceiveProps 是 React 生命周期方法，一旦你的 React 组件收到父级的 prop，就会调用它。可以在那里执行的操作例如更新状态，而不是调用返回 React Component 的 getDate 方法。

一个可能的实现可能是：

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

Answer 5

您只能在渲染中返回 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 进一步优化，它也会产生相同的效果，以便在道具更改时调用渲染。 React.PureComponent 实现了 shouldComponentUpdate 的浅层 prop 和状态比较。

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

无论如何，你实际上是将日期存储在组件的 state 中，然后在 render 方法中根据 state 渲染数据

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