javascript - 如何呈现句子中随机设置的粗体文本

Question

我想在句子中的随机位置呈现粗体字符串。

到目前为止，我一直在考虑这种方法

const wordToMatch = 'apples';
const sentence = 'I like apples and bananas';

sentence.split(' ').map(string=> {
  return string === wordToMatch ? <b>{string}</b> : {string}
}).join(' ');

我收到了一组对象，其中一个(我匹配的那个)看起来像这样。

$$typeof: Symbol(react.element)
key: null
props: {children: undefined}
ref: null
type: "b"
_owner: FiberNode {tag: 0, key: null, elementType: ƒ, type: ƒ, stateNode: null, …}
_store: {validated: false}

Answer 1

这应该在不加入 map 结果的情况下运行良好，只需在不匹配的单词后添加空格，React render 将渲染 map 元素(字符串或 jsx 对象)

请看下面的片段:

const wordToMatch = 'apples';
const sentence = 'I like apples and bananas';

let output = sentence.split(' ').map(string=> {
  return string === wordToMatch ? <b>{string} </b> : string+" "
});

ReactDOM.render(output,document.getElementById("txt"))

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