React 创建一个Placeholder 组件

class PlaceholderComponent extends React.Component {
  render() {
    const {renderChildren, ...rest} = this.props as any;

    if (typeof renderChildren === 'function') {
      return renderChildren(rest);
    }

    return null;
  }
}

以下是一个示例，展示了如何使用PlaceholderComponent组件而不传递props.text属性：

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 其他组件内容 */}
        <PlaceholderComponent renderChildren={(props) => (
          <div>
            {/* PlaceholderComponent渲染的内容 */}
            <span>{props.text}</span>
          </div>
        )} />
      </div>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

在上述代码中，没有在PlaceholderComponent中传递text属性。因此，props.text将为undefined。当渲染<span>元素时，将显示空内容。

你可以根据实际需求在ParentComponent中传递text属性，例如：

<PlaceholderComponent renderChildren={(props) => (
  <div>
    {/* PlaceholderComponent渲染的内容 */}
    <span>{props.text || "默认文本"}</span>
  </div>
)} text="示例文本" />

在上述代码中，text属性被传递给PlaceholderComponent，并在渲染<span>元素时使用props.text的值。如果props.text为假值（如undefined，null，''等），则显示默认文本"默认文本"。