反应:如何将孩子作为字符串? [英] React: How to get children as string?
问题描述
我正在为我们正在构建的几个组件编写文档,因此文档(也是一个 React 组件如下所示:
const myDoc = () =>(<div><MyComponent title="MyTitle"/><code className="language-jsx">{`<MyComponent title="MyTitle"/>`}
)
看到 MyComponent 上的重复了吗?所以我创建了代码"组件来处理:
const Code = ({ children }) =>(<div>{孩子们}<代码>{孩子们}
)
那么 MyDoc 现在是:
const myDoc = () =>(<代码><MyComponent title="MyTitle"/></代码>)
但是由于 Code 中的 children 是一个对象,所以它不会呈现为字符串.
有没有办法做到这一点?或者也许是更好的解决方案?
试试这个:
const MyComponent = ({标题}) =>(<div>{title}</div>)const MyDoc = () =>(<代码><MyComponent title="我的标题" obj={{obj: {obj: 1}}}><MyComponent title="我的另一个组件标题"><MyComponent title="我的另一个组件标题"/></我的组件></我的组件></代码>)常量代码 = ({孩子们}) =>(<div>{孩子们}<预><代码>{JsxString(儿童)}</code></pre>
)const JsxString = (component, counter = 0) =>{让 type = component.type.name;让道具 = component.props;让 propsString = "";for (let key in props) {如果(键!==孩子"){让 propValue = props[key];让值 = "";if (propValue instanceof Object) {value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`;} 别的 {value = `"${propValue}"`;}propsString += ` ${key}=${value}`;}}如果(道具.儿童){计数器 += 2;var children = JsxString(props.children, counter);返回 `<${type}${propsString}>${Array(counter).join(" ")} ${children}${Array(counter).join(" ")}</${type}>`;}返回 `<${type}${propsString}/>`;}ReactDOM.render(<MyDoc/>,document.getElementById('容器'));
I am writing documentation for a a couple of components we are building, so the doc (which is also a react component looks like this:
const myDoc = () => (
<div>
<MyComponent title="MyTitle" />
<code className="language-jsx">
{`<MyComponent title="MyTitle" />`}
</code>
</div>
)
See the duplication on MyComponent? So I created the "Code" Component to handle that:
const Code = ({ children }) => (
<div>
{children}
<code>
{children}
</code>
</div>
)
Then MyDoc now is:
const myDoc = () => (
<Code>
<MyComponent title="MyTitle" />
</Code>
)
But since children inside Code is a object, it will not render as string.
Is there a way to achieve this? Or maybe a better solution?
Try this:
const MyComponent = ({
title
}) => (
<div>{title}</div>
)
const MyDoc = () => (
<Code>
<MyComponent title="My title" obj={{obj: {obj: 1}}}>
<MyComponent title="My another component title">
<MyComponent title="My another component title" />
</MyComponent>
</MyComponent>
</Code>
)
const Code = ({
children
}) => (
<div>
{children}
<pre><code>
{JsxString(children)}
</code></pre>
</div>
)
const JsxString = (component, counter = 0) => {
let type = component.type.name;
let props = component.props;
let propsString = "";
for (let key in props) {
if (key !== "children") {
let propValue = props[key];
let value = "";
if (propValue instanceof Object) {
value = `{${JSON.stringify(propValue).replace(/['"]+/g, '')}}`;
} else {
value = `"${propValue}"`;
}
propsString += ` ${key}=${value}`;
}
}
if (props.children) {
counter += 2;
var children = JsxString(props.children, counter);
return `<${type}${propsString}>
${Array(counter).join(" ")} ${children}
${Array(counter).join(" ")}</${type}>`;
}
return `<${type}${propsString} />`;
}
ReactDOM.render(
<MyDoc />,
document.getElementById('container')
);
这篇关于反应:如何将孩子作为字符串?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!