react js如何在jsx中添加一个按钮

Question

我想在 props.text 的末尾添加一个按钮，但使用此代码会将 [object Object] 放在文本的末尾，而不是“设置行”按钮

function UnchangedText(props) {
  const setLines = <button>Set Lines</button>;
  return (
    <div className={props.className}>
      <span></span>
      <pre>{
        props.text.includes("\n") 
        ? props.text + setLines
        : props.text
      }</pre>
    </div>
  );
}

Answer 1

试试这个

function UnchangedText(props) {
  const setLines = <button>Set Lines</button>;
  return (
    <div className={props.className}>
      <span></span>
      <pre>{
        props.text.includes("\n") 
        ? <>{props.text}  {setLines} </>
        : props.text
      }</pre>
    </div>
  );
}