React组件props传递值不渲染，仅显示prop名称问题求助

你的问题出在JSX属性的写法上：在Screen.js中，你给div的id属性赋值时用双引号包裹了{sectionID}，这会让React把它当成普通字符串而非JavaScript表达式，所以页面上显示的就是{sectionID}而不是传入的screenOne。

修复步骤 #

只需要修改Screen.js中div的id属性写法，去掉包裹{sectionID}的双引号：

修改后的Screen.js #

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';

function Screen(props) {
  const sectionID = props.id;
  const tag = props.tag;
  const header = props.header;

  return(
    // 去掉id属性值的双引号，直接使用JSX表达式
    <div className="panel" id={sectionID}>
      <Container>
        <Row className="justify-content-center align-items-center">
          <Col xs={12} md={6}>
            <div className="panel__left">
              <h1 className="panel__left-title">
                <span className="d-block">{tag}</span>
                <span className="d-block">{header}</span>
              </h1>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  )
}
export default Screen;

补充说明 #

在JSX中：

• 属性值为字符串时，用双引号包裹（比如className="panel"）
• 属性值为JavaScript变量/表达式时，直接用{}包裹，不需要额外加引号（比如id={sectionID}）

修改后，页面渲染时就会正确显示你传入的screenOne作为div的id值了。

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