Question

如何创建一个reactjs组件，该组件将使用另一个组件呈现props数据。例如，我有一句话说“你好，这是{{name}}。你好吗。”现在我想用reactjs组件替换名称。当我尝试用它显示为[对象对象]的组件替换名称时。

首先编辑：

var sentence = "Hello guys this is {{name}}. How are you.";

var tag_values = {'name': 'any Name'}

TagBox将使用sentence和tag_value作为道具，并用Tag组件替换标签。并渲染它

var TagBox = React.createClass({
    render: function(){
        // replacing the tags with Tag component
        this.props.sentence = this.props.sentence.replace(tags_values['name'], <Tag \>)
        return(
            <div>
                {this.props.sentence} //Issue: This will Print as "Hello guys this is [Object Object]. How are you." 
                // But this should print as "This will Print as Hello guys this is any Name. How are you."
                // After clicking on "any Name" it should be replaced with input.
            </div>
        );
    }
})

标签组件将双击输入框替换标签。并再次使用输入数据替换输入框。这可以使用州来完成。

var Tag = React.createClass({})

Answer 1

好的，假设您输入了一个字符串，则需要创建一个数组。

var parts = str.split(/\{\{|\}\}/g); 
// => ["Hello guys this is ", "name", ". How are you."]

奇数项是文字字符串，偶数部分是括号之间的东西。

现在我们将创建一个名为mapAlternate的辅助函数。其中一个函数调用奇数元素，一个函数调用数组中的偶数元素。

function mapAlternate(array, fn1, fn2, thisArg) {
  var fn = fn1, output = [];
  for (var i=0; i<array.length; i++){
    output[i] = fn.call(thisArg, array[i], i, array);
    // toggle between the two functions
    fn = fn === fn1 ? fn2 : fn1;
  }
  return output;
}

现在我们可以在我们的组件中执行类似的操作：

render: function(){
    var parts = str.split(/\{\{|\}\}/g);


    // render the values in <strong> tags
    var children = mapAlternate(parts, 
        function(x){ return <span>{x}</span>; }, 
        function(x){ return <strong>{x}</strong> });

   return <div>{children}</div>;
}

这给了我们：＆＃34;大家好，这是名称。你好吗。＆＃34;

Answer 2

您听说过React String Replace吗？

这是一个无状态组件示例：

import replace from 'react-string-replace';
const reg = /\{([a-z|A-Z|0-9|\.]+)\}/g;


const OutputComponent = props => {
    var str = 'Hello {name}, this is a "Super" component: {Super}';
    var output = replace(str, reg, prop => props.replacements[prop]);

    return <div>{output}</div>;
}

// later
import Super from './Super.jsx';
const obj = {
    Super: <Super />,
    name: 'John'
}

return <OutputComponent replacements={obj} />;

Answer 3

我刚用react-jsx-parser

解决了这个问题

你的例子是：

import JsxParser from 'react-jsx-parser'

export default class TagBox extends React.Component {
    render() {
       const sentence = "Hello guys this is <Tag>name</Tag>. How are you." // simply include the component in your string
        return(
            <JsxParser components={{ Tag }} jsx={ sentence } /> // identify the component in your string to inject
        )
    }
}

Answer 4

不幸的是，上面的一切对我都没有用。这是一个有用的稳定解决方案regexify-string（npm）

npm install-保存regexify-string

像魅力一样工作

regexifyString({
        pattern: /\[.*?\]/gim,
        decorator: (match, index) => {
            return (
                <Link
                    to={SOME_ROUTE}
                    onClick={onClick}
                >
                    {match}
                </Link>
            );
        },
        input: 'Some initial string with [link]',
    });

Reactjs如何将react组件插入到字符串中然后呈现

4 个答案: