主页 / 问题 / 1108648
Accepted
pinkertem
Asked:2020-04-11 13:55:07 +0000 UTC2020-04-11 13:55:07 +0000 UTC

在 React 中使用之前，我应该将 props 和 state 中的值放入中间变量吗？

  • 772

我目前正在从官方文档中学习 React，并注意到了这件事。在组件和道具、状态和生命周期部分，他们直接使用道具和状态：

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}        <-----
      alt={props.user.name}             <-----
    />
  );
}
...
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>        <-----
      </div>
    );
  }
}

但是在下一章中，例如，条件渲染，他们已经转向这种方法，首先将值放在中间变量中：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;           <-----
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
...
render() {
  const isLoggedIn = this.state.isLoggedIn;    <-----
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

例如，我已经知道为什么在根据当前状态的值设置新状态时，最好将当前状态放在一个变量中。但这里的情况不同。

在这些情况下是否有任何真正的理由使用中间变量？

javascript

1 个回答

  1. Best Answer

    可能我错了，聪明的大叔会指出我错了，但是我觉得Greeting代码很多余，应该这样写作为一个选项：

    return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />

    一般来说，他们这样写是为了不到处写 this.state （我个人太懒了），我尝试在渲染中获取那些需要的状态，如下所示：

    const { isLogin, isCount } = this.state;

    （this.props也是一样）另外，变量嵌套可以很大this.props.first.second.thirt.isLogin，不是很方便到处写

    • 0

相关问题