[英]How to wrap a character with a span tag after rendering
我有一個隨機生成的字符串作為道具傳遞給子組件。 將其顯示在段落標簽中。 示例字符串可以是:
貓,狗,鳥
鳥,魚,倉鼠,鵝
貓,魚,狗
等等..
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或如何修改已經渲染的段落。
您可以使用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>
一種可能的替代方法是使用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>
}
請注意,第一部分包含在初始答案中,並被排除在添加領先跨度的過程中; 這樣可以避免索引比較。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.