Question

我有这个类组件Field.jsx（摘要）：

render() {
...
<div className="field-row"> 

   {this.getPlayersByPosition(players, 5).map((player,i) => (
      <Position
        key={i} 
        className={fullScreen ? "full-screen-player" : "player"}
        getPositionData={this.getPositionData}
        toggleFullScreen={this.toggleFullScreen.bind(this)}
        fullScreen={this.state.fullScreen}
      >{player.name}</Position>
    ))} 
</div>
...

{

我需要通过一个渲染条件。条件应为：

渲染Field时，我只想显示播放器名称。

当我单击并发生toggleFullScreen时，我将显示所有数据。

这是我正在尝试的：

Position.jsx

export const Position = props => {

    const { matches, mean, goals} = props.getPositionData(props.children);

    return (

        <div

           {props.fullScreen && 
            <p>Name: {props.children}</p>   // condition 
          }

            className={props.className}
            onClick={() => {
                props.getPositionData(props.children);
                props.toggleFullScreen();
            }}
        >
            <p>Name: {props.children}</p>
            <p>Goals: {goals}</p>
            <p>Mean: {mean}</p>
            <p>Matches: {matches}</p>
        </div>
    )
}

但是我得到了错误：

      Line 13:10:  Parsing error: Unexpected token, expected "..."

  11 |         <div
  12 | 
> 13 |         {props.fullScreen && 
     |          ^
  14 |      <p>Name: {props.children}</p>
  15 |          }
  16 |

我想念什么？

Answer 1

{props.fullScreen && 
  <p>Name: {props.children}</p>   // condition 
}

这些行出现在<div>的中间，您应在其中指定div的道具。您需要将其向下移动才能成为div的子代。

<div
 className={props.className}
 onClick={() => {
     props.getPositionData(props.children);
     props.toggleFullScreen();
 }}
>
 {props.fullScreen && (
   <p>Name: {props.children}</p>
 )}
 <p>Goals: {goals}</p>
 <p>Mean: {mean}</p>
 <p>Matches: {matches}</p>
</div>

反应-使用条件渲染值

1 个答案: