Как использовать переменную в качестве значения для реквизита в вызове компонента для React?

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

Это не правильный путь.Вы объявили свою константу внутри функции render.Но область действия функции заканчивается до того, как вы ее используете.

Попробуйте

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

Или объявите константу в глобальной области (до определения вашего класса)

ТогдаВы можете использовать фигурные скобки, чтобы получить результат:

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

Надеюсь, это поможет!

Answer 2

const name = "Lister"; не должен быть объявлен в компоненте Greeting.

Попробуйте поместить компонент Greeting в отдельный файл.Импортируйте его в файл, в который вы звоните ReactDOM.render(), используя import {Greeting} from './path/to/greeting'

Затем добавьте

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

или, если вы хотите поместить 'Lister' в переменную: let name = 'Lister' где-нибудьв файле, куда вы звоните ReactDOM.render()

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

Надеюсь, это поможет