沒有if語句的本機條件渲染

Question

是否可以在不使用render / else語句的情況下重新渲染特定的組件。 因此，當特定語句更改時，只有他的特定組件會重新呈現，而其余組件則保持不變。

因為如果我使用componentWillUpdate或shouldComponentUpdate，它將再次重新渲染整個應用程序場景。

期待您的答復。

Answer 1

您可以嘗試-

class MainComponent extends React.Component {
        displayMessage() {
            if (this.props.isGreeting) {
                return <Text> Hello, JSX! </Text>;
            } else {
                return <Text> Goodbye, JSX! </Text>;
            }
        }

        render() {
            return ( <View> { this.displayMessage() } </View> );
        }
    }

查看本文-https://medium.com/@szholdiyarov/conditional-rendering-in-react-native-286351816db4

Answer 2

您可以嘗試使用新的ES6增強對象庫。 我們可以使用方括號[]表示法來訪問對象的屬性：

myObj = { "name":"Stan", "age":26, "car": "Lamborghini"};
x = myObj["name"]; //x will contain Stan

因此您可以使用這種方法進行條件渲染

this.state = {
    contentToDisplay: "content1",
}

render() {
    return (
        <section>
            {{
                content1: <Content1 />,
                content2: <Content2 />,
                content3: <Content3 />,
            }[this.state.contentToDisplay]}
        </section>
    );
}