如何在 React JSX 中访问引号内的道具？

以下方法可以访问 React JSX 中引号内的道具：

方法一：我们可以将任何 JS 表达式放在大括号内作为整个属性值。
方法 2：我们可以使用 ES6 模板字面量。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

方法一：App.js

Javascript

import React, { Component } from "react";
  
class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}
  
export default App;

Javascript

import React, { Component } from "react";
  
class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}
  
export default App;

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

方法 2：App.js

Javascript

import React, { Component } from "react";
  
class App extends Component {
  render() {
    return (
      
        
      
    );
  }
}
  
export default App;

注意：确保在index.js文件中传递组件中的 prop 值，并将任何示例图片放在public文件夹中，就像这里我们使用reactLogo.png 一样。

index.js

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：您将在浏览器屏幕上看到reactLogo.png图片。