我可以通过编程传递一个prop到子组件在反应?

Question

我希望组件的子组件具有类前缀。显然，我们可以通过这个。props访问儿童。但是不建议修改它的值。但无论如何，硬编码它感觉很不自然，所以也许你可以想出一个主意?

<Aside className="right">
<Timer className="right" />
<LoginFrame className="right" buttonTitle="this.state.buttonTitle" />
</Aside>

例如，我希望我的Timer具有className="right__timer"，其中__timer后缀在组件本身中指定

Answer 1

<Timer className="right" />

不会单独将class添加到HTML元素中，这需要在Timer本身或其子元素中进行处理，其中className最终被添加到本地HTML元素中，而不是React组件。

例如，对于Timer，您可以使用-

const Timer = ({ className }) => {
return (
<div className={`${className}__timer`}>...</div>
)
}

和用法-

<Timer className="right" />

编辑……

你可以使用-

{React.Children.map(children, child => (
React.cloneElement(child, {className: child.props.className.concat(className)})
))}

Answer 2

我认为有两种可能性:

<<ol>

上下文/gh><<li>组件/gh># 1上下文

#1.1创建上下文

const ClassContext = React.createContext({
className: "right"
});

const { className } = useContext(ClassContext);
// prefix this to your component

<Aside className="right">
<ClassContext.Provider value={{className: "right"}}>
<Timer />
<LoginFrame buttonTitle="this.state.buttonTitle" />
</ClassContext.Provider>
</Aside>

<<p>

# 2组件/strong>创建一个添加Classname Prop的Aside组件

const Aside = (props) => {
const {children, ...all} = props;
return (
<div {...all}>
{React.Children.map(children, child => (
React.cloneElement(child, {className: props.className})
))}
</div>
);
}

Answer 3

这是你要找的吗?

const prefix = "right";
.
.
.

<Aside className={`${prefix}`}>
<Timer className={`${prefix}_timer1`} />
<LoginFrame className={`${prefix}_timer2`} buttonTitle="this.state.buttonTitle" />
</Aside>

Answer 4

在传递之前，没有什么可以阻止你在内部修改prop:

function Timer(props) {
if(props.className) props.className += "__timer";
return <h1 {...props}>...</h1>;
}