您可以使用props：

// Card.js
return (
    <div>
        <Score score={score} />
    </div>
);

// Score.js
const Score = (props) => {
  return (
    <div>
      <p>{`Score: ${props.score}`}</p>
    </div>
  );
};

这是doc

您需要将分数值作为 prop 从Card组件传递到Score组件。
在卡片组件中，可以在渲染分数值时将其作为 prop 传递给分数组件：

return (
    <div>
      <Score score={score} />
    </div>
  );

然后，在乐谱组件中，可以使用props.score访问乐谱 prop ，并使用它渲染乐谱：

const Score = (props) => {
  return (
    <div>
      <p>{`Score: ${props.score}`}</p>
    </div>
  );
};

您应该使用props。
使用props，您可以将数据从一个组件传递到另一个组件。在您的示例中，您可以将得分值从卡组件传递到score组件。
在卡片组件中，将分数值作为 prop 传递：

return (
    <div>
        <Score score={score} />
    </div>
);

现在，在Score组件中，您将使用props呈现score值。score：

const Score = (props) => {
  return (
    <div>
      <p>{`Score: ${props.score}`}</p>
    </div>
  );
};

另一种方法，如果你想把 prop 从父级传递到许多结构复杂的子级。你可以使用“React上下文”，也仍然有一些其他的库来管理React状态，如Redux，反冲，...

在卡片组件中导入得分组件，并在子组件中传递来自父组件的 prop ，Reactjs具有 prop 钻取的概念

// Card.js
return (
    <div>
         //pass the prop from here
        <Score score={score} />
    </div>
);

// Score.js
const Score = (props) => {
  return (
    <div>
      <p>{`Score: ${props.score}`}</p>
    </div>
  );
};