有条件地反应渲染

Question

我在 render（）中包含以下代码，希望有条件地呈现视图。

this.state.body.map((block) => {
       this.conditionalRendering(block)
 })

我具有以下功能：

conditionalRendering(block) {
        if (block.tag.toLowerCase() === 'paragraph') {
            this.renderParagraph(block);
        } else if (block.tag.toLowerCase() === 'headline') {
            this.renderHeadline(block);
        } else if (block.tag.toLowerCase() === 'image') {
            this.renderImage(block);
        }
    }

    renderParagraph(block) {
        return (
            <h2>paragraph</h2>
        );
    }

    renderHeadline(block) {
        return (
            <h2>Headline</h2>
        );
    }

    renderImage(block) {
        return (
            <h2>Image</h2>
        );
    }

我不知道为什么函数不返回任何东西。

更新，完整代码：

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import './assets/css/bootstrap.min.css';
// import './assets/js/bootstrap.min';

import config from './config';

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            uuid: null,
            title: null,
            author: null,
            tags: [],
            preamble: null,
            body: [],
            publishingTime: null
        };

        this.conditionalRendering = this.conditionalRendering.bind(this);
        this.renderHeadline = this.renderHeadline.bind(this);
    }

    componentDidMount() {
        this.fetchArticle();
    }

    fetchArticle() {
        fetch(config.apiUrl + "article/a028b454-38f7-49c1-a5d7-25e3d66b71d2")
            .then(response => response.json())
            .then(data => {
                console.log(data)
                this.setState({
                    uuid: data.uuid,
                    title: data.title,
                    author: data.author.name,
                    tags: data.tags,
                    premable: data.premable,
                    body: data.body,
                    publishingTime: data.publishingTime,
                });
            })
            .catch(error => {
                console.log(error);
            });
    };

    conditionalRendering(block) {
        if (block.tag.toLowerCase() === 'paragraph') {
            this.renderParagraph(block);
        } else if (block.tag.toLowerCase() === 'headline') {
            this.renderHeadline(block);
        } else if (block.tag.toLowerCase() === 'image') {
            this.renderImage(block);
        }
    }

    renderParagraph(block) {
        return (
            <h2>paragraph</h2>
        );
    }

    renderHeadline(block) {
        return (
            <h2>Headline</h2>
        );
    }

    renderImage(block) {
        return (
            <h2>Image</h2>
        );
    }

    render() {
        return (
            <div className="App">
                <div className={"container-fluid article"}>
                    <div className={"row header header"}>
                        <img width="100%"
                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcPfD5duVTGlFQUBulzJRhd7j7DIBiD9HimVBBr8quMeYulH_c"
                             alt=""/>
                    </div>
                    <div className={"row"}>
                        <div className={"col-sm-12 content text-left mt-2"}>
                            <h4>{this.state.title}</h4>
                            <p>{this.state.author} | {this.state.publishingTime}</p>
                            <p>{this.state.premable}</p>
                            <p className={"mt-3"}>{this.state.preamble}</p>
                            {
                                this.state.body.map((block) => {
                                    return this.conditionalRendering(block)
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

Answer 1

conditionalRendering方法不返回任何东西，它必须是：

   conditionalRendering(block) {
        if (block.tag.toLowerCase() === 'paragraph') {
            return this.renderParagraph(block);
        } else if (block.tag.toLowerCase() === 'headline') {
            return this.renderHeadline(block);
        } else if (block.tag.toLowerCase() === 'image') {
            return this.renderImage(block);
        }
    }