如何在 React 的组件调用中使用变量作为 prop 的值？

Question

我正在尝试使用变量作为道具名称的值，但似乎无法使其工作。甚至可能还是我需要额外的步骤？

我试过只使用普通电话：

class Greeting extends React.Component {
  render() {
    const name = "Lister";
    return <h1>Hi there, {this.props.firstName}!</h1>;
  }
}

ReactDOM.render(
  <Greeting firstName=name />, 
  document.getElementById('app')
);

还尝试了反引号

<Greeting firstName=`${name}' />

甚至双卷发

<Greeting firstName={{name}} />

我认为这会非常简单，并希望变量能够简单地传递，然而，事实并非如此。有什么建议吗？

Answer 1

const name = "Lister"; 不应在 Greeting 组件中声明。

尝试将 Greeting 组件放在一个单独的文件中。使用 import {Greeting} from './path/to/greeting'

将其导入到您调用 ReactDOM.render() 的文件中

然后添加

  <Greeting firstName='Lister' />, 
  document.getElementById('app'));

或者如果您想将 'Lister' 放在变量中： let name = 'Lister' 在你调用 ReactDOM.render()

的文件中某处

  <Greeting firstName={name} />, 
  document.getElementById('app'));

希望对您有所帮助

Answer 2

这不是正确的方法。您已经在 render 函数中声明了常量。但是函数的范围在你使用它之前就结束了。

尝试

ReactDOM.render(
  <Greeting firstName="Lister" />, 
  document.getElementById('app')
);

或者在全局范围内声明常量（在定义您的 class 之前）

然后可以用花括号得到结果：

ReactDOM.render(
  <Greeting firstName={name} />, 
  document.getElementById('app')
);

希望对您有所帮助！

如何在 React 的组件调用中使用变量作为 prop 的值？

How to use a variable as value for a prop in a component call for React?

reactjs

react-props