在父组件中反应子组件

Question

试图做出一些不同的东西，但也许根本不一样。
创建一个视图，其中有不同的组件，其中还有用于页面部分的组件，并且在这些组件中还有其他几个较小的组件（如按钮等）。当我有组件样式的组件时，我在 Chrome 控制台中遇到错误

Section(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

它的外观：

import { Component, ReactNode } from "react";
import Section from "../../../components/Section/Section";
import Button from "../../../components/Button/Button";

class About extends Component{
    render(): ReactNode {
        return (
            <Section theme="dark" title="About">
                About content
                <div className="about-content">
                    <p>Lorem ipsum dolor sit amet...</p>

                    <Button theme="primary">Contact us</Button>
                </div>
            </Section>
        );
    }
}

export default About;

当我禁用<Button>一切正常

而<Section>组件：

import React from "react";
import "./themes.scss";

interface SecProps {
    title?: string;
    smalltext?: string;
    theme?: string; // dark, light, purple, gray
}

class Section extends React.Component<SecProps>{
    constructor(props: any) {
        super(props);

        this.state = {
            title: "",
            smalltext: "",
            theme: ""
        };
    }

    private sectionTheme(): string | undefined {
        switch (this.props.theme) {
            case "dark":
                return "black";
            case "light":
                return "lightgray";
            case "purple":
            case "gray":
                return this.props.theme;
            default:
                return "";
        }
    }

    public render() {
        return(
            <section className={this.sectionTheme()}>
                <div className="container">
                    <div className="sect-head">
                        {(this.props.title) ? <h2>{this.props.title}</h2> : ""}
                        {(this.props.smalltext) ? <small>{this.props.smalltext}</small> : ""}
                    </div>

                    <div className="sect-content">
                        {this.props.children}
                    </div>
                </div>
            </section>
        );
    }
}

export default Section; 

还有<Button>组件：

import React from "react";

interface BtnProps{
    type?: string;  // button, link 
    theme?: string; // primary, outline
    url?: string;
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
}

class Section extends React.Component<BtnProps>{
    constructor(props: any){
        super(props);

        this.state = {
            type: "button",
            theme: "",
            url: "#"
        };
    }

    render() {
        const btn = this.props;

        if(btn.type === "button"){
            return(
                <button 
                  className={this.buttonClass()}
                  onClick={this.props.onClick}
                  >
                    {btn.children}
                </button>
            )
        }else if(btn.type === "link"){
            return(
                <a 
                  href={btn.url}
                  className={this.buttonClass()}
                  >
                    {btn.children}
                </a>
            )
        }
    }

    private buttonClass() : string | undefined {
        switch(this.props.theme){
            case "primary":
                return "primary";
            case "outline":
                return "outline";
            default:
                return "";
        }
    }
}

export default Section; 

是的，我是 React 的新手，从某事开始，找不到任何正确的答案

Answer 1

问题很清楚：当条件不匹配时， Button组件不会返回任何内容。

您只需要在Button的渲染方法末尾添加一个简单的return null ：

render() {
    const btn = this.props;

    ...

    return null;
    
}

另一种选择是在使用时将缺少的道具之一添加到Button ：

<Button theme="primary" type="button">Contact us</Button>

或者

<Button theme="primary" type="link">Contact us</Button>

无论哪种情况，我建议您将return null保留在render方法中。