reactjs - 如何将占位符设置为textarea元素中的对象？

Question

我正在尝试在<textarea/>中设置占位符所以要这样装

{
  "name": "jon",
  "job": "developer"
}

我尝试在变量中分配占位符，然后在占位符中调用它

const placeholderText = 
`{
   "name": "jon",
   "job": "developer"
}`

但我认为有更好的方法来做到这一点，特别是当对象中的键值太长时，这可能会破坏线路。

Answer 1

您可以将占位符保留在常规对象中，并使用 JSON.stringify 和 placeholder 属性的一些缩进。

示例

function App() {
  const placeholderObj = {
    name: "jon",
    job: "developer"
  };

  return (
    <textarea
      placeholder={JSON.stringify(placeholderObj, null, 2)}
      rows={10}
      cols={30}
    />
  );
}

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

<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>

<div id="root"></div>