如何将生成的HTML传递给JSX中的渲染函数？

Question

在JSX中的组件的render函数中传递生成的HTML是否合法？

...
//get variables elsewhere
const input = <input type={inputType} ... /> 

return (
  {input}
)
...

当我尝试将其构建为字符串时，例如const input = '<input type="' + inputType'" + />'它被呈现为纯文本。

实际上，我的return是：

return (
    <div>{input}</div>
)

Answer 1

除了return之外，您发布的代码完全没问题（我们马上就会知道）;你不需要或不想使用字符串。

请记住，JSX只是JavaScript代码的语法糖：

const input = <input type={inputType} />;

...只是React.createElement的加糖版本：

const input = React.createElement("input", { type: inputType });

它创建了元素对象，您可以在函数之间传递它，并且可以通过从render返回来呈现它。

要做到这一点，你只需要：

return input;

您的return ({input})将无效，因为您尝试使用JSX语法在JSX外部插入JavaScript表达式（{...}）。

直播示例：

class Example extends React.Component {
  getTheThing() {
    const inputType = "text";
    const input = <input type={inputType} />;
    return input;
  }
  render() {
    const input = this.getTheThing();
    return input;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<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>

重新编辑：

  

实际上，我的回报是：

return (
    <div>{input}</div>
)

没关系（除了缺少; - 我不关心依赖ASI），因为你在JSX块（{...}）中使用<div>...</div>。< / p>

直播示例：

class Example extends React.Component {
  getTheThing() {
    const inputType = "text";
    const input = <input type={inputType} />;
    return input;
  }
  render() {
    const input = this.getTheThing();
    return (
        <div>{input}</div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<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>