如何在JSX中将元素的一个prop值复用至另一个prop？

你不能直接在组件标签内部引用当前组件的prop（比如示例里的customName），因为这个prop是传给组件的，在当前父组件的作用域里并没有这个变量。可以用以下两种方式实现需求：

• 提前定义变量复用
  先把要共享的值存在变量里，再分别传给两个prop，这是最直观的写法：

  const sharedName = "foo";
  <CustomCard customName={sharedName} customProp={sharedName} />
  

• 在组件内部处理（若允许修改子组件）
  如果你有权修改CustomCard组件的代码，可以在组件内部默认把customProp设为customName的值，使用时可按需覆盖：

  // CustomCard 组件内部
  function CustomCard({ customName, customProp = customName }) {
    // 组件逻辑
    return <div>{customProp}</div>;
  }
  
  // 使用时，customProp 自动继承 customName 的值
  <CustomCard customName="foo" />
  // 需要自定义 customProp 时直接传入即可覆盖
  <CustomCard customName="foo" customProp="bar" />
  

如果你的场景是在父组件里必须在组件标签中直接复用某个prop的值（比如动态生成场景），只能通过提前定义变量的方式实现——因为JSX标签的属性值只能引用当前作用域的变量，而非组件自身的prop。

内容的提问来源于stack exchange，提问作者Burak Kaplan