Question

我正在尝试创建一个组合的输入文本（连接4个输入组件），但是我无法。

一切似乎都还可以，我能够显示输入文本的唯一方法是将其放置在主要的React组件（cardform）的渲染中。在DOM资源管理器（chrome）中，唯一的组件是一个空的cardNumberFullField

这是HTML：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="script.js"></script>
</body>
</html>

这是JS：

    class CardForm extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>
                <cardNumberFullField />
            </div>
        )
    }
}

function cardNumberFullField() {
    return (
        <div>
            <cardNumberInputField inputName="0" />
            <cardNumberInputField inputName="1" />
            <cardNumberInputField inputName="2" />
            <cardNumberInputField inputName="3" />
        </div>
    )
}

function cardNumberInputField(props) {
    return (
        <div>
            <input id={props.inputName} name={props.inputName} type="text" />
        </div>
    )
}

// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"))

Answer 1

反应自定义组件始终需要使用大写字母。因此，cardNumberFullField应该是CardNumberFullField，cardNumberInputField应该是CardNumberInputField

选中Specifying The React Element Type。

JSX标签的第一部分确定React元素的类型。

大写的类型表示JSX标签引用了React   零件。这些标记被编译为对   命名变量，因此，如果您使用JSX表达式，则Foo必须为   范围。

class CardForm extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <CardNumberFullField />
      </div>
    );
  }
}

function CardNumberFullField() {
  return (
    <div>
      <CardNumberInputField inputName="0" />
      <CardNumberInputField inputName="1" />
      <CardNumberInputField inputName="2" />
      <CardNumberInputField inputName="3" />
    </div>
  );
}

function CardNumberInputField(props) {
  return (
    <div>
      <input id={props.inputName} name={props.inputName} type="text" />
    </div>
  );
}

// Main render
ReactDOM.render(<CardForm />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

现在显示反应输入文本

1 个答案: