当与if函数一起使用来呈现时，无法获取props send to子类组件的值

当与if函数一起使用时，无法获取props send to子类组件的值的原因是，if函数在条件不满足时会返回undefined，而此时子类组件可能尚未渲染，props尚未传递给子类组件，因此无法获取props的值。

解决这个问题的方法可以是使用条件渲染，即在父组件中判断条件，并根据条件渲染子类组件。这样可以确保子类组件在接收到props之后再进行渲染，从而能够获取到传递给子类组件的props的值。

以下是一个示例代码：

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [showChild, setShowChild] = useState(true);
  const propsToSend = { value: 'example' };

  return (
    <div>
      {showChild && <ChildComponent {...propsToSend} />}
      <button onClick={() => setShowChild(!showChild)}>Toggle Child Component</button>
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ value }) => {
  return (
    <div>
      <p>Props value received: {value}</p>
    </div>
  );
}

export default ChildComponent;

在上述示例中，父组件通过条件渲染的方式控制子组件的显示与隐藏。父组件中定义了一个名为propsToSend的对象，将需要传递给子组件的props值存储在该对象中。在子组件中，通过解构赋值的方式接收父组件传递的props，并在渲染时显示该props的值。

这样，无论与if函数一起使用与否，子组件都能够正确接收到props的值。