Question

我想使用switch或for或if循环执行一些逻辑。但是我无法使用渲染方法中的任何一个。现在我正在使用三元运算符。我们可以在render方法中访问任何其他运算符吗？

Answer 1

使用内联功能。演示：https://jsfiddle.net/viviancpy/7v9th3Lj/1/

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>




var Hello = React.createClass({
  render: function() {
    return (
        <div>
        {(() => {
        switch (this.props.name) {
          case "World":   return (<div>Oh this is a Hello World</div>);
          default:       return (<div>Good Morning</div>);
        }
      })()}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 2

您应该查看https://facebook.github.io/react/tips/if-else-in-JSX.html上的示例。

一种选择是在JSX之外使用逻辑，并将子组件存储在稍后可以注入JSX的变量中。

示例（来自上面的链接）：

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
);

我们可以在render方法下的react js中使用什么条件运算符？

2 个答案: