Question

我有一个随机生成的字符串作为道具传递给子组件。将其显示在段落标签中。示例字符串可以是：

猫，狗，鸟

鸟，鱼，仓鼠，鹅

猫，鱼，狗

等等。

class Example extends React.Component {
  state = {
    string: ''
  };


  componentDidMount() {
    let newString = this.props.passedString.replace(',', '<span>,</span>');
    this.setState({string: newString});
  }

  render() {
    return (  
      <div><p>{this.state.string}</p></div>
    )
  };
}

我想在子组件的段落内的每个逗号周围添加标签。我尝试添加componentDidMount方法，该方法用包裹在字符串中的span标记中的逗号替换每个逗号，但是出于明显的原因，这只是将span标记添加为字符串的一部分，我不知道如何将其显示为html中的实际标签，或如何修改已经渲染的段落。

Answer 1

您可以使用String#split和Array#map方法来生成满足您要求的JSX：

/* Split the input randomString by `,` in to an array of string part */
const stringParts = randomString.split(',');

/* Use map to transform each string part to a React.Fragment. Prepend a
   comma enclosed by <span> for any string part that's not the first in
   the array */
const wrappedParts = stringParts.map((stringPart, index) => {

    return <React.Fragment>
    { index === 0 ? null : <span>,</span>}{stringPart}
    </React.Fragment> 
})

以下是一个功能组件，显示了此功能：

span {
background:lightgrey;
margin:0.1rem;
}

<div id="module"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script type="text/babel">

  const MyComponent = (props) => { 
    const { randomString } = props;
    
    return randomString.split(',').map((stringPart, index) => {

        return <React.Fragment>{ index === 0 ? null : <span>,</span>}{stringPart}</React.Fragment> 
    })
  }

  ReactDOM.render(
    <div>
      <MyComponent randomString={ 'bird, fish, hamster, goose' } />
      <hr/>
      <MyComponent randomString={ 'cat, dog, bird' } />
      <hr/>
      <MyComponent randomString={ 'cat, fish, dog' } />
    </div>, 
  document.getElementById("module"));
</script>

Answer 2

可能的替代方法包括使用Array#reduce以及String#split和其他Array方法。

在您的示例中，您可以删除componentDidMount()方法，并用以下内容替换render()。

render() {
  const splitString = this.props.passedString.split(",");
  <div><p>
    { splitString.slice(1).reduce((total, stringPart) => {
        total.concat([(<span>,</span>), stringPart])
      }, [splitString[0]])
    }
  </p></div>
}

请注意，第一部分包含在初始答案中，并被排除在添加领先跨度的过程中；这样可以避免索引比较。

渲染后如何使用span标签包裹字符

2 个答案: