加入 JS 字符串数组和 JSX 元素答案

【问题标题】：Join JS String Array and JSX element加入 JS 字符串数组和 JSX 元素
【发布时间】：2018-09-08 16:38:33
【问题描述】：

我正在尝试使用 JSX 元素 <span className="bullet">•</span> 加入 "8.8.8.8".split('.') JS 元素数组。

在 React 环境中渲染它会得到8[object Object]8[object Object]8[object Object]8。

有什么解决办法吗？

【问题讨论】：

你的预期输出是什么？
8 • 8 • 8 • 8 @ashishsingh
点是html元素吗？
@ashishsingh 是的。它是•
但它不是字符串，它是一个 JSX 元素，因此它会这样做

标签： javascript reactjs jsx

【解决方案1】：

试试看

"8.8.8.8".split('.').reduce((res, item) => {
    if (!res) {
        return [item];
    }

    return [...res, <span className="bullet">•</span>, item];
})

【讨论】：

你实际上不需要if (!res) { return [item]; }
为什么？它是初始化第一个元素所必需的
我很确定 '8' 是第一个元素。没有？

【解决方案2】：

我假设您正在尝试循环，然后在每次迭代时使用项目符号渲染一个跨度。

我还假设你想要一个跨度，所以它是一个内联元素？

我不会使用字符项目符号，而是使用类似的东西：

<ul>
    // loop through your array here
    <li className="bullet" style="display:inline;"> 
         arrayElement 
    </li>
</ul>

或者，如果您必须使用项目符号点，只需指定项目符号的实际代码而不是符号

•（圆形项目符号）代码：& #8226; 或 & bull;

【讨论】：

【解决方案3】：

由于这是针对 React 的，所以可以这样完成。

在您的组件中：

render(){
    let myArray = "8.8.8.8".split('.');

    return (
    <div>
      {myArray.map((item, index) => {
        if (index !== myArray.length -1 ) {
            return <span key={index}>{item}<span className="bullet">•</span></span>
           } else {
            return <span key={index}>{item}</span>
           }
         })}
    </div>
    );
}

基本上这里要做的是：

创建数组（或从其他函数获取）。
循环遍历数组项。
为数字和点创建一个 span 对象，最后一个除外。
所有都在组件的渲染中完成。

结果是：

8•8•8•8

在html中：

<div>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8<span class="bullet">•</span></span>
    <span>8</span>
</div>

这是一个Sandbox 看看它的工作原理。

您也可以将数组作为组件的 props 接收，并创建一个静态组件以始终呈现类似的内容。

删除：

let myArray = "8.8.8.8".split('.');

改变

myArray.map

到

this.props.myArray.map

这样调用：

<NumberDotComponent myArray={"8.8.8.8".split('.')}/>

【讨论】：

【解决方案4】：

问题在于join 试图将对象（React 元素）转换为字符串，因为 join 是一个字符串函数。 [object Object] 是该对象上 toString 方法的结果。相反，您应该返回一个数组。

这是一个迭代字符串的每个字符并用 React 元素替换特定字符的示例：

function App(props) {
  let foo = '8.8.8.8'
  let replaceChar = '.'
  let output = [...foo].map(char=>(
    char === replaceChar ? <span className="bullet">•</span> : char
  ))
  
  return <React.Fragment>{output}</React.Fragment>
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script>

<div id="app">Error Encountered</div>

【讨论】：