Question

是否可以在渲染中不使用if / 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增强对象litrals。我们可以使用括号[]表示法访问对象的属性：

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>
    );
}

没有if语句的React Native Conditional Rendering

2 个答案: