React组件间如何传递Prop及共享状态变量？技术求助

问题分析 #

你遇到的变量未定义问题，本质是React组件的作用域独立性导致的：History组件无法直接访问App组件内定义的good、neutral、bad等状态变量，必须通过props显式传递才能使用。同时要实现"点击按钮后才显示Statistic组件"的需求，需要结合条件渲染来控制组件的显示时机。

方案一：将统计数据通过props传入History组件 #

如果坚持要把Statistic放在History组件中显示，只需给History传递所需的状态变量作为props即可：

修改History组件 #

const History = (props) => {
  if (props.allClick.length === 0) {
    return (
      <div>
        the app is used by pressing the buttons
      </div>
    )
  }

  return (
    <div>
      <div>button press history: {props.allClick.join(' ')}</div>
      {/* 传入props后即可正常使用变量 */}
      <Statistic title="good" type={props.good}/>
      <Statistic title="neutral" type={props.neutral}/>
      <Statistic title="bad" type={props.bad}/>
      <Statistic title="all" type={props.all2}/>
      <Statistic title="positive" type={(props.good / props.all2 * 100).toFixed(2)} />
    </div>
  )
}

在App组件中传递props给History #

// App组件的return部分修改History的调用
<History 
  allClick={allClick} 
  good={good} 
  neutral={neutral} 
  bad={bad} 
  all2={all2} 
/>

// 同时移除App中原本单独渲染的Statistic组件

方案二：在App组件中直接控制Statistic的条件渲染 #

更符合组件职责单一性的做法是：让History只负责显示点击历史，Statistic的显示时机由App通过条件判断控制（当有至少一次点击时才显示）：

修改App组件的return部分 #

return (
  <div>
    <h1> give feedback </h1>
    <div style={inlineButton}>
      <Button handleClick={goodClick} text="good"/>
      <Button handleClick={neutralClick} text="neutral"/>
      <Button handleClick={badClick} text="bad" />
    </div>

    <h1> statistics </h1>

    <History allClick={allClick} />

    {/* 当总点击数大于0时，才渲染统计组件 */}
    {all2 > 0 && (
      <div>
        <Statistic title="good" type={good}/>
        <Statistic title="neutral" type={neutral}/>
        <Statistic title="bad" type={bad}/>
        <Statistic title="all" type={all2}/>
        <Statistic title="positive" type={(good / all2 * 100).toFixed(2)} />
      </div>
    )}
  </div>
)

补充说明 #

• 计算positive时添加.toFixed(2)是为了避免出现多位小数的情况，提升显示友好度；
• React中组件间传递数据的核心方式是props，父组件的状态或变量必须通过props传递给子组件，子组件才能访问；
• 条件渲染通过&&运算符实现：当all2 > 0为真时，才会渲染后面的统计组件。

内容的提问来源于stack exchange，提问作者Jabri Juhinin