javascript - 带有特殊字符的条件输入占位符(十六进制值)

Question

如何有条件地渲染占位符以返回字符，而不是字符串值本身？

为什么第二个输入占位符解释为特殊字符，而第一个输入占位符解释为字符串

class App extends React.Component{
  render(){
    const {mode} = this.props;
    return(
      <div>
      <div><input type="password" placeholder={mode ?"pass":"&#x25CF;&#x25CF;&#x25CF;&#x25CF;"} /></div>
<input type="password" placeholder="&#x25CF;&#x25CF;&#x25CF;&#x25CF;"/>
</div>
    )
  }
}

ReactDOM.render(
  <App mode={false}/>,
  document.getElementById("react")
);

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

Answer 1

正如评论所说，我们可以直接使用该符号。

还有另一个编程解决方案:DOMParser()

The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.

const yourText = `●`

const parser = new DOMParser();
const text = parser.parseFromString(yourText, "text/html").body.textContent;

placeholder={mode && text}

在此处查看更多示例:

const App = () => {
const InputMode0 = () => {
  return (
    <div>
      <input type="password" placeholder="&#x25CF;&#x25CF;&#x25CF;&#x25CF;" />
    </div>
  );
};
const InputMode1 = ({ mode }) => {
  const parser = new DOMParser();
  const text = parser.parseFromString(
    `&#x25CF;&#x25CF;&#x25CF;&#x25CF;`,
    "text/html"
  ).body.textContent;
  return (
    <div>
      <input
        type="password"
        {...(mode
          ? { placeholder: text }
          : { placeholder: `&#x25CF;&#x25CF;&#x25CF;&#x25CF;` })}
      />
    </div>
  );
};
const InputMode2 = ({ mode }) => {
  const parser = new DOMParser();
  const text = parser.parseFromString(
    `&#x25CF;&#x25CF;&#x25CF;&#x25CF;`,
    "text/html"
  ).body.textContent;
  return (
    <div>
      <input
        type="password"
        placeholder={mode ? text : `&#x25CF;&#x25CF;&#x25CF;&#x25CF;`}
      />
    </div>
  );
};

return (
  <div className="App">
    <InputMode0 />
    <InputMode1 mode={false} />
    <InputMode1 mode={true} />
    <InputMode2 mode={false} />
    <InputMode2 mode={true} />
  </div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

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