在 React.JS 中，如何在呈现字段的组件上设置 readOnly 属性

Question

React.JS 提供了多种实现组件的机制 - 基于类、通过 React.JS 钩子实现组件，还可以使用Styled-Components。在 Web 应用程序中，有时需要在 HTML 元素readOnly上设置属性input。要通过 HTML 实现这一点，需要使用HTML 元素readOnly上的属性/属性input。令人困惑的是 HTML 属性没有值：

<!-- Create a readOnly input field to display the username -->
<input id='username' name='username' value='fred.fish' readOnly />

在 React.JS 中，如果在定义组件时使用JSXprops ，则可以指定属性 ( )。props然后使用标准 XML 属性/属性语法指定的值。

这是 React.JS 组件的示例：

const PageTitleHeading1 = (props) => {
    const {
        id,
        textLine1,
        textLine2,
        textLine3,
        showCompanyNameLogo
    } = props;

    if (id === undefined || id === null || id === '') {
        throw new Error('Bad call to BasePageTitleHeading1. id is required ' +
                        'and must not be undefined, null, or the empty string.');
    }

    const pageHeadingLine1 = (textLine1 !== undefined && textLine1 !== null &&  textLine1 !== '') ?
                             <PageHeadingLine1Style key='1' className='pageHeadingLine1Style'>{textLine1}</PageHeadingLine1Style> :
                             null;

    const pageHeadingLine2 = ((textLine2 !== undefined && textLine2 !== null &&  textLine2 !== '') || showCompanyNameLogo) ?
                             <PageHeadingLine2 key='2' className='PageHeadingLine2' showCompanNameLogo={showCompanyNameLogo ? true : false} text={(textLine2 !== undefined && textLine2 !== null) ? textLine2 : ''}/> :
                             null;

    const pageHeadingLine3 = (textLine3 !== undefined && textLine3 !== null &&  textLine3 !== '') ?
                             <PageHeadingLine3Style key='3' className='PageHeadingLine3Style'>{textLine3}</PageHeadingLine3Style> :
                             null;

    return (
        <PageHeading1 id={id} className={`pageHeading1 ${props.className}`}>
            {pageHeadingLine1}
            {pageHeadingLine2}
            {pageHeadingLine3}
        </PageHeading1>
    );
}

我可以使用标准 JSX 语法使用该组件，并使用标准 XML 属性/属性指定其属性：

        <PageTitleHeading1
            id='change-your-password-page-title-heading'
            textLine1='Welcome to the'
            textLine2=' On-Demand Training Platform'
            textLine3='Please change your password'
            showCompanyNameLogo={true}
        />

那么如果我想渲染一个作为input字段的 React.JS 组件并设置readOnly属性/属性怎么办？这有点令人困惑，因为在 HTML 中，字段readOnly中的属性/属性input没有值<input id='username' name='username' value='fred.fish' readOnly />，而在 React.JS 中，当指定要在组件中使用的属性/属性时，属性/属性就有值。那么如何在呈现HTML 元素/实体的readOnlyReact.JS 组件上设置属性呢？input

input以下是使用Styled-Components呈现字段的组件示例。如何渲染一个设置了 ReadOnly 属性的 React.JS 组件？

const StyledInputField = styled.input`
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
`

Answer 1

在 React.JS 中，如果您使用 JSX，则 readOnly 在组件中作为布尔属性运行。

下面是一个样式组件（参见Styled-Components）

const StyledInputField = styled.input`
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
`

您实际上不必了解或理解样式组件才能理解这个答案。readOnly现在假设我想在从组件声明创建的组件上设置属性StyledInputField？

<StyledInputField type="text" readOnly={true} />

React.JS 将 ReadOnly 解释为 ReadOnly 属性，并将其解释为真值，因为给定组件应使用设置的 readOnly 属性进行渲染。

这实际上将为您提供以下内容：

CSS：

.styledInputField {
    width: ${props.width ? props.width : '100%'};
    height: ${props.height ? props.height : '42px'};
    padding: 10px 10px 10px 10px';
    font-family: Montserrat, sans-serif;
    font-size: 16;
    font-weight: 600;
    text-align: left;
}

HTML：

<input type="text" class="styledInputField" readOnly />

React.JS 识别该readOnly属性并适当处理它。还可以使用状态值或prop

示例 - 这里我用来props.isReadOnly设置 readOnly 属性StyledInputField：

<StyledInputField type="text" readOnly={props.isReadOnly} />

如果props.isReadOnly为真，则将设置 readOnly 属性。如果props.isReadOnly是假的，则不会被设置。

• True 和 False 与 Ruby、Python 和 JavaScript 中的“Truthy”和“Falsey”（或“Falsy”）
• 如何在 React.JS TextBox 组件中设置只读 TextBox

我最初在这里发布了这个答案How to use as readonly 。我在 StackExchange 上分享它，因为我确信其他 React.JS 开发人员需要渲染 readOnlyinput字段，并且可能会在弄清楚语法方面遇到一些困难。我希望这有帮助。